Code in *.ascx file
<link href="/sites/9999/_layouts/dialog.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="/sites/9999/_layouts/dialog.js" type="text/javascript" />
<script type="text/javascript"></script>
<table>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="OpenMyDialog(); return false" />
</td>
</tr>
</table>
<div class="container">
<div class="main">
<div id="dialog" title="Profile Input">
<form action="" method="post">
<label>
Enter Profile Name:</label>
<input id="name" name="name" type="text" />
<br />
<br />
<input id="submit" type="submit" value="Ok" class="PopUpOkButton" />
<input id="close" type="button" value="Close" class="PopUpCloseButton" />
</form>
</div>
</div>
</div>
dialog.js
$(document).ready(function () {
$(function () {
$("#dialog").dialog({
autoOpen: true
});
});
$("#submit").click(function (e) {
alert($("#name").val());
return false;
});
$("#close").click(function (e) {
$("#name").val("");
$("#dialog").dialog("close");
});
});
function OpenMyDialog() {
$("#dialog").dialog("open");
}
dialog.css
.PopUpOkButton
{
border:1px solid #59b4d4;
background:#0078a3;
color:#eee;
padding:3px 0;
border-radius:5px;
margin-left:0%;
cursor:pointer;
width:80px
}
.PopUpCloseButton
{
border:1px solid #59b4d4;
background:#0078a3;
color:#eee;
padding:3px 0;
border-radius:5px;
margin-left:0%;
cursor:pointer;
width:80px
}
Detail reference over here.
No comments:
Post a Comment