mohammad973
دوشنبه 01 مهر 1392, 09:03 صبح
سلام . این 1نمونه مثال :
کدهای Html اون :
<input id="CancelBTN" type="button" value="انصراف" />
<input id="SendCommandBTN" type="button" value="ارسال" />
<div id="Warning">
<div id="mask">
</div>
<div id="dialog">
<%-- در این قسمت کنترل های دلخواهت ، مثل دکمه ها و لیبیل ها و ... رو قرار بده --%>
<input id="close" type="button" value="بستن" />
</div>
</div>
و این هم کدهای جی کوئری اون ::
$("#SendCommandBTN").click(function () {
var mask_width = $(window).width();
var mask_height = $(window).height() + 225;
$("div#mask").css('width', mask_width).css('height', mask_height);
$("div#mask").fadeIn(500);
$("div#mask").fadeTo(250, 0.7);
var ll = mask_width / 2 - $("div#dialog").width() / 2;
var tt = mask_height / 2 - $("div#dialog").height() / 2;
$("div#dialog").css('left', ll).css('top', tt);
$("div#dialog").fadeIn(500);
$("div#dialog").fadeTo(250, 0.85);
});
$("#close").click(function () {
$("div#mask").fadeTo(250, 1.0);
$("div#dialog").slideUp(550);
$("div#mask").fadeOut(500);
});
$("div#mask").click(function () {
$("div#mask").fadeTo(250, 1.0);
$("div#dialog").fadeOut(500);
$("div#mask").fadeOut(500);
});
و این ها هم کدهای Css مورد نیاز ::
#mask {
background-color: Black;
z-index: 900;
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 1px;
display: none;
margin: 0 auto;
}
#dialog {
background: #fffbc2;
border-color: #ff9024;
border-width: 4px;
padding: 10px;
position: absolute;
width: 500px;
z-index: 999;
display: none;
margin: 0 auto;
}
#close {
float: left;
text-align: center;
cursor: pointer;
color: #c70000;
font-family: Aflak_Traffic;
font-size: 15px;
}
#close:hover {
background-color: #c70000;
color: yellow;
transition: background-color linear 1s, color ease 0.5s;
-o-transition: background-color linear 1s, color ease 0.5s;
-webkit-transition: background-color linear 1s, color ease 0.5s;
-moz-transition: background-color linear 1s, color ease 0.5s;
}
امیدوارم مفید باشه برات دوست عزیز .