Multiple Pop in same page-Jquery .
u can use the following code you can easly add the same type of popups in samp page with diff "div"
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script> <style type="text/css">
.web_dialog_overlayback
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
</style>
<script type="text/javascript">
$(function (){
$("#btnShowSimple").click(function ()
{$("#overlay").show(); $("#dialog").fadeIn(300);
if (modal){$("#overlay").unbind("click"); }
else {$("#overlay").click(function (){$("#overlay").hide();$("#dialog").fadeOut(300);});}});
$("#btnClose").click(function (){$("#overlay").hide();$("#dialog").fadeOut(300);});});
$(function (){ $("#Simple").click(function ()
{$("#overlay1").show(); $("#dialog1").fadeIn(300);
if (modal){$("#overlay1").unbind("click"); }
else{$("#overlay1").click(function (){$("#overlay1").hide();$("#dialog1").fadeOut(300);});}});
$("#btnClose1").click(function (){$("#overlay1").hide();$("#dialog1").fadeOut(300);});});
</script>
</head>
<body>
<h3>JQuery Multiple Popup Dialogs in same page </h3>
<a id="btnShowSimple" value="Simple Dialog" /> cickhere</a>
<br />
<br />
<div id="overlay" class="web_dialog_overlayback"></div>
<div id="dialog" class="web_dialog">
<a href="#" id="btnClose">Close</a>
content one <!--you can add anything inside of this div-->
</div>
<br />
<br />
<a id="Simple" value="Simple Dialog" /> donglee</a>
<div id="overlay1" class="web_dialog_overlay"></div>
<div id="dialog1" class="web_dialog">
<a href="#" id="btnClose1">X</a>
content two <!--you can add anything inside of this div-->
</div>
</body>
</html>
No comments:
Post a Comment