1. Opening a modal pop-up on button click
a. $(function() {
$("#mybtn").click(function() {
$("#mydlg").dialog();
});
});
OR
b. $(document).ready(function() {
$("#mybtn").click(function() {
$("#mydlg").dialog();
});
});
Both of these will work.
Full code :
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<link href="jquery-1.10.2-ui.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.10.2-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mybtn").click(function() {
$("#mydlg").dialog();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydlg">
</div>
<button type="button" id="mybtn"></button>
</form>
</body>
=================================================
2. Using dialog("open")
To enable dialog("open"), you should disable the dialog's autoOpen behavior:
<script type="text/javascript">
$(document).ready(function() {
$("#mydlg").dialog({ autoOpen: false });
$("#mybtn").click(function() {
$("#mydlg").dialog("open");
});
});
</script>
Full Code :
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<link href="jquery-1.10.2-ui.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.10.2-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mydlg").dialog({ autoOpen: false });
$("#mybtn").click(function() {
$("#mydlg").dialog("open");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydlg">
</div>
<input type="button" id="mybtn" />
</form>
</body>
=============================================================
No comments:
Post a Comment