팝업 창 인스턴스 정보
16813 단어 실시간 노트
프런트:
<div id="div1">
<input type="button" name="123" value="123" onclick="showScreen();" />
<div id="hintBox" runat="server" class="hintBox">
<table style="width: 500px; height: 300px; padding-left: 20px;" border="0" cellpadding="0" cellspacing="0">
<tr style="height: 50px;">
<td style="width: 250px;">
<asp:Button Text=" " runat="server" ID="Btn1" CssClass="CssBtn1" OnClientClick=" return Click();" />
td>
<td style="width: 250px;">
<asp:Button Text=" " runat="server" ID="Btn2" CssClass="CssBtn1" OnClientClick="return Close();" />
td>
tr>
<tr>
<td colspan="2">
<asp:Label ID="Label1" CssClass="LabText" Text=" :" runat="server" />
<asp:TextBox ID="txtWXProfile" CssClass="kuangN" runat="server" TextMode="MultiLine"
Rows="4" cols="48" Style="width: 450px; height: 220px;" />
td>
tr>
table>
div>
<div class="lock" runat="server" id="lock">
div>
CSS:
.CssBtn1 {
box-shadow: 1px 1px 1px 1px #D4D4D4;
width: 100px;
height: 35px;
background-color: #44B649;
border: 1px solid #44B649;
color: #fff;
font-size: 16px;
margin-left: 40px;
border-radius: 2px;
}
.hintBox {
box-shadow: 10px 5px 10px 0px #ccc;
border: 1px solid #ccc;
width: 500px;
height: 300px;
background: #FFFFFF;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999; /* margin: -3.025rem 0.000rem 0.000rem -6.025rem; */
overflow: hidden;
border-radius: 2px;
display: none;
}
.LabText {
font-family: " ";
color: #666666;
}
/* */
.kuangN {
border: 1px solid #ccc;
overflow: auto;
}
/* */
.lock {
background: #fff;
position: absolute;
top: 0px;
left: 0px;
filter: alpha(opacity=50); /*IE , 50%*/
-moz-opacity: 0; /*Firefox , 50%*/
opacity: 0; /* , 50%*/
z-index: 999;
display: none;
}
JS:
function showScreen() {
//
var bodyH = $('body').height();
var bodyW=$('body').width();
var windowH = $(window).height();
var widnowW = $(window).width();
var DivID = $('.hintBox');
var lock = $('.lock');
var top = (windowH - DivID.height()) / 2;
var left = (widnowW - DivID.width()) / 2;
if (bodyH < windowH) {
bodyH = windowH;
}
// DIV
lock.css({
heigth: bodyH,
width: bodyW,
display: "block"
});
DivID.css({
display: "block"
});
DivID.css('top', top).css('left', left);
window.onresize = function () {
var top = ($(window).height() - $('.hintBox').height()) / 2;
var left = ($(window).width() - $('.hintBox').width()) / 2;
$('.hintBox').css('top', top).css('left', left);
}
$('.kuangN').focus();//
}
function Close() {
var DivID = document.getElementById("hintBox");
var lockID = document.getElementById("lock");
var TextID = document.getElementById("txtWXProfile");
DivID.style.display = "none";
lockID.style.display = "none";
TextID.value = "";
return false;
}
function Click() {
var TextValue = document.getElementById("txtWXProfile").value;
TextValue = TextValue.replace(/\ +/g, "");
TextValue = TextValue.replace(/[ ]/g, "");
TextValue = TextValue.replace(/[\r
]/g, "");
if (sTrim(TextValue)=="") {
alert(" !");
TextID.value = "";
return false;
}
else {
return true;
}
}