js简单的弹出框有关闭按钮

前端技术 2023/09/06 JavaScript
复制代码 代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>简易弹出框</title>
<style type=\"text/css\">
.mydiv {
background-color: #ff6;
border: 5px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/

margin-left:-150px!important;/*FF IE7 */
margin-top:-60px!important;/*FF IE7 */

margin-top:0px;

position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&
document.compatMode==\'CSS1Compat\') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=10);/*IE*/
opacity:0.8;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/

_top: expression(eval(document.compatMode &&
document.compatMode==\'CSS1Compat\') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
/*The END*/

</style>
<script type=\"text/javascript\">
function showDiv(){
document.getElementById(\'popDiv\').style.display=\'block\';
document.getElementById(\'bg\').style.display=\'block\';
}

function closeDiv(){
document.getElementById(\'popDiv\').style.display=\'none\';
document.getElementById(\'bg\').style.display=\'none\';
}

</script>

</head>

<body>

<div id=\"popDiv\" class=\"mydiv\" style=\"display:none;\"><br/>弹框内容<br/>
<a href=\"javascript:closeDiv()\">关闭</a></div>
<div id=\"bg\" class=\"bg\" style=\"display:none;\"></div>

<div style=\"padding-top: 20px;\">
<input type=\"Submit\" name=\"\" value=\"点此弹框\" onclick=\"javascript:showDiv()\" />
</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/17044

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案