How To Call A JQuery Popup From Asp.net Control
<head>
<style type="text/css">
body
{
background-color: #eee;
}
/* popup_box DIV-Styles*/
#popup_box
{
display: none; /* Hide the DIV */
position: fixed;
_position: absolute; /* hack for internet explorer 6 */
height: 300px;
width: 600px;
background: #FFFFFF;
left: 300px;
top: 150px;
z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
margin-left: 15px; /* additional features, can be omitted */
border: 2px solid #5EA5F2;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #5EA5F2;
-webkit-box-shadow: 0 0 5px #5EA5F2;
box-shadow: 0 0 5px #5EA5F2;
}
.close
{
cursor: pointer;
text-decoration: none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose
{
font-size: 20px;
line-height: 15px;
right: 5px;
top: 5px;
position: absolute;
color: #6fa5e2;
font-weight: 500;
}
</style>
</head>
PopUp :-
<!-- OUR PopupBox DIV-->
<div id="popup_box">
<h1>
Sample JQuery Popup</h1>
<h2>This is a simple popup box.</h2>
<a id="popupBoxClose" class="close">Close</a>
</div>
<div>
<asp:Button runat="server" ID="btn_show" Text="Show Popup" OnClientClick="return false;" />
Scripts:-
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// When site loaded, load the Popupbox First
//loadPopupBox();
$('#btn_show').click(function () {
loadPopupBox();
});
$('#popupBoxClose').click(function () {
unloadPopupBox();
});
$('#container').click(function () {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut(700);
$("#container").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn(700);
$("#container").css({ // this is just for style
"opacity": "0.3"
});
}
});
</script>
Don't forget to leave your feedback and comments below..!
No comments:
Post a Comment