Dialog modal popup on button click using jquery
In this article, i will explain how to set pop up div
on button click . In previous we have seen How to open pop up image on pageload using jquery and css but now we have seen on click on button.
Source Code :-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jquerypopupmodel.aspx.cs" Inherits="jquerypopupmodel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dialog
Modal Popup on Button Click</title>
<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="Stylesheet"
type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
function
ShowDialog1() {
$("#div1").dialog();
}
function
ShowDialog2() {
$("#div2").dialog({
modal: true
});
}
function
ShowDialog3() {
$("#div3").dialog({
modal: true,
closeOnEscape: false
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width:350px">
<legend>Dialog
Modal Popup on Button Click-DEMO</legend>
<input type="button" value="Click
Here To Show Popup Model" onclick="ShowDialog1();" />
<div id="div1" title="JQuery
Popup Dialog Model" style="display: none;">
Backgound will not be disabled
this popup will be closed on
"Esc" key pressed.
</div>
<br />
<br />
<input type="button" value="Click
Here To Show Popup Model" onclick="ShowDialog2();" />
<div id="div2" title="JQuery
Popup Dialog Model" style="display: none;">
Backgound will be disabled this
popup will be closed on
"Esc" key pressed.
</div>
<br />
<br />
<input type="button" value="Click
Here To Show Popup Model" onclick="ShowDialog3();" />
<div id="div3" title="JQuery
Popup Dialog Model" style="display: none;">
Backgound will be disabled and
this popup will not be closed on
"Esc" key pressed.
</div>
</fieldset>
</form>
</body>
</html>
Dialog modal popup on button click using jquery
![Dialog modal popup on button click using jquery]()
Reviewed by NEERAJ SRIVASTAVA
on
1:42:00 PM
Rating:
No comments: