In this example we explain that how to close jQuery
Dialog Modal Popup when outside is clicked or how to hide the Modal popup when click
on overlay Background.
How to close or hide modal popup in jQuery when
click is perform outside the Modal popup. Here the background is in overlay
mode or in invisible mode so when click on any part of the body the modal popup
will be automatically close or hide regardless of the click on the close
button.
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="HideDialog.aspx.cs" Inherits="HideDialog"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Close
jQuery UI Dialog Modal Popup when outside (Overlay Background) is clicked</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"
type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function
() {
$("#dialogpopup").dialog({
modal: true,
autoOpen: false,
title: "jQuery
dialogpopup",
width: 300,
height: 150,
open: function
(event, ui) {
$(".ui-widget-overlay").click(function () {
$('#dialogpopup').dialog('close');
});
}
});
$("#btnShow").click(function () {
$('#dialogpopup').dialog('open');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnShow" value="Show Dialog" />
<div id="dialogpopup" style="display: none" align="center">
Click the outside to hide or close the
jQuery Modal Popup.
</div>
</form>
</body>
</html>
0 comments:
Post a Comment