<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:150px;
width:500px;
background:#FFFFFF;
left: 400px;
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 #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a{
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>
<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
$('#a_CancelPayment').click(function() {
loadPopupBox();
});
$('#popupBoxClose').click(function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#wrapper").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#wrapper").css({ // this is just for style
"opacity": "0.3"
});
}
/**********************************************************/
});
</script>
Put the below code in form tag in your body....
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<table style="width :100%;">
<tr ><td style="width :15%;"></td>
<td align="center" style="width :70%;">
<table>
<tr style="height:100px;">
<td align="center">Do you really want to cancel your recurring payments?</td>
</tr>
<tr><td align="center"><asp:Button ID="btn_ConfirmCancelPayment" runat="server" Text ="Confirm" OnClick ="btn_ConfirmCancelPayment_Click" />
<asp:Button ID="btn_CancelPayment" runat="server" Text ="Cancel" OnClick ="btn_CancelPayment_Click"/></td></tr>
<tr></tr>
</table>
</td><td style="width :15%;"></td>
</tr>
</table>
<a id="popupBoxClose">Close</a>
</div>
/* popup_box DIV-Styles*/
#popup_box {
display:none; /* Hide the DIV */
position:fixed;
_position:absolute; /* hack for internet explorer 6 */
height:150px;
width:500px;
background:#FFFFFF;
left: 400px;
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 #ff0000;
padding:15px;
font-size:15px;
-moz-box-shadow: 0 0 5px #ff0000;
-webkit-box-shadow: 0 0 5px #ff0000;
box-shadow: 0 0 5px #ff0000;
}
#container {
background: #d2d2d2; /*Sample*/
width:100%;
height:100%;
}
a{
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>
<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
$('#a_CancelPayment').click(function() {
loadPopupBox();
});
$('#popupBoxClose').click(function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut("slow");
$("#wrapper").css({ // this is just for style
"opacity": "1"
});
}
function loadPopupBox() { // To Load the Popupbox
$('#popup_box').fadeIn("slow");
$("#wrapper").css({ // this is just for style
"opacity": "0.3"
});
}
/**********************************************************/
});
</script>
Put the below code in form tag in your body....
<div id="popup_box"> <!-- OUR PopupBox DIV-->
<table style="width :100%;">
<tr ><td style="width :15%;"></td>
<td align="center" style="width :70%;">
<table>
<tr style="height:100px;">
<td align="center">Do you really want to cancel your recurring payments?</td>
</tr>
<tr><td align="center"><asp:Button ID="btn_ConfirmCancelPayment" runat="server" Text ="Confirm" OnClick ="btn_ConfirmCancelPayment_Click" />
<asp:Button ID="btn_CancelPayment" runat="server" Text ="Cancel" OnClick ="btn_CancelPayment_Click"/></td></tr>
<tr></tr>
</table>
</td><td style="width :15%;"></td>
</tr>
</table>
<a id="popupBoxClose">Close</a>
</div>
No comments:
Post a Comment