jQuery Mobile is a web-based technology and great building UI interfaces for the webpages that can be used to make responsive content for websites that can be accessed on all types of smartphones, tablets, and desktops.
In this article, we will be using the jQuery Mobile Popup tolerance option to set the minimum distance from the edge of the window or page for the corresponding edge of the popup. “30,15,30,15” is the default tolerance value.
These values can be specified in four ways:
- An empty string, null.
- A single number.
- Two comma-separated numbers.
- Four comma-separated numbers.
Syntax: The parameter takes the value in an above-specified manner.
$( ".selector" ).popup({
tolerance: "0,0"
});-
Syntax to Get the default option.
var tolerance = $( ".selector" ).popup( "option", "tolerance" );
-
Syntax to Set the default option.
$( ".selector" ).popup( "option", "tolerance", "0,0" );
CDN Links: Following are the jQuery Mobile scripts that you will need in your project so add these scripts into 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: This example describes the uses of the jQuery Mobile Popup tolerance option.
<!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=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>jQuery Mobile Popup tolerance Option</h3>
<div role="main" class="ui-content">
<a href="#divID" data-rel="popup">
GeeksforGeeks
</a>
<div data-role="popup" id="divID" data-tolerance="30,15,30,15" data-theme="b">
<p>
A Computer Science portal for geeks.
</p>
</div>
</div>
<input type="button" id="Button"
width="50%"
value="Value of the tolerance option">
<h3><span id="gfg"></span></h3>
</center>
<script>
$(document).ready(function () {
$("#Button").on('click', function () {
var tolerance = $( "#divID" ).popup( "option", "tolerance" );
$("#gfg").html(tolerance);
});
});
</script>
</body>
</html>
|
Output:
jQuery Mobile Popup tolerance option
Reference: https://api.jquerymobile.com/popup/#option-tolerance