jQuery Mobile panel dismissible Option

Last Updated : 13 Jan, 2022

jQuery Mobile is an HTML5 based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.

Panels are widgets used to create columns, drawers, collapsible menus, etc. They are very flexible widgets and can be used for multiple purposes.

In this article, we are going to learn the jQuery Mobile Panel dismissible option. The dismissible option enables or disables the feature of dismissing the panel by just clicking outside the panel.

Syntax: The dismissible option takes a boolean value and the syntax is as follows. If true, we can dismiss the panel by clicking outside the panel and vice-versa.

$("#gfgpanel").panel({
    dismissible: false
});

Get the dismissible option.

var dismissible = $( ".selector" )
    .panel( "option", "dismissible" );

Set the dismissible option

$( ".selector" ).panel( "option", "dismissible", false );

CDN Links: Use the following CDNS for jQuery Mobile projects.

<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 have two panels, one panel has the dismissible set to false and another panel set to true.

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="page"> 
        <div data-role="header"> 
            <h1 style="color:green;">GeeksforGeeks</h1> 
        </div> 
        <div data-role="main" class="ui-content"> 
            <h4>jQuery Mobile Panel dismissible Option</h4> 
            <a href="#gfgpanel1" data-role="button"> 
              Open Panel 1</a> 
            <a href="#gfgpanel2" data-role="button"> 
              Open Panel 2</a> 
        </div> 
        <div data-role="panel" id="gfgpanel1" data-dismissible="false"> 
            <div class="panel-content"></div> 
            <h2>Welcome to GeeksforGeeks</h2> 
            <p>Panel dismissible option is false</p> 
  
            <a href="#" data-rel="close" data-role="button"> 
               Close panel 
            </a> 
        </div> 
        <div data-role="panel" id="gfgpanel2" data-dismissible="true" 
             data-position="right"> 
            <div class="panel-content"></div> 
            <h2>Welcome to GeeksforGeeks</h2> 
            <p>Panel dismissible option is true</p> 
  
            <a href="#" data-rel="close" data-role="button"> 
               Close panel 
            </a> 
        </div> 
    </div> 
    <script> 
        $(document).ready(function() { 
            $("#gfgpanel1").panel({ 
                dismissible: false 
            }); 
            $("#gfgpanel2").panel({ 
                dismissible: true 
            }); 
        }); 
    </script> 
</body> 
</html>