jQuery Mobile Popup defaults Option

Last Updated : 13 Jan, 2022

jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery.

It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. The popup opens a new small window above the page with some data. A popup is opened by nesting to a link on the page.

In this article, we will learn to implement the jQuery Mobile Popup defaults option. The defaults option does not allow the data values for the widget. This improves the startup time as jQuery’s auto enhancement code does not take the data values from the widget.

Syntax: By default, the default option is set to false. We can change it using the following syntax. The parameter takes a boolean value.

$("#divID").popup({
    defaults: true
});

Get the default option.

var defaults = $("#divID").popup( "option", "defaults" );

Set the default option.

$("#divID").popup( "option", "defaults", true );

CDN Links: Use the following CDNs for your project.

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we had the data-theme set to “b”(dark) but because the defaults option is set to true, it will not work.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link rel="stylesheet" href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <div data-role="header"> 
        <h1>GeeksforGeeks</h1> 
    </div> 
    <center> 
        <h3>jQuery Mobile Popup defaults option</h3> 
        <div role="main" class="ui-content"> 
            <a href="#divID" data-rel="popup"> 
                GeeksforGeeks 
            </a> 
            <div data-role="popup" id="divID" 
                 data-defaults="true" data-theme="b"> 
                <p> 
                    A Computer Science portal for geeks. 
                </p> 
  
            </div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function() { 
            $("#divID").popup({ defaults: true }); 
        }); 
    </script> 
</body> 
</html>