js弹窗 js弹出DIV,并使整个页面背景变暗

1.首先写一个遮罩层div，然后再写一个弹窗的div

<!-- 遮罩层 -->
<div id="cover" style="background: #000; position: absolute; left: 0px; top: 0px; width: 100%;  filter: alpha(opacity=30); opacity: 0.3; display: none; z-index: 2 "></div><!-- 弹窗 -->
<div id="showdiv" style="width: 80%; margin: 0 auto; height: 9.5rem; border: 1px solid #999; display: none; position: absolute; top: 40%; left: 10%; z-index: 3; background: #fff"><!-- 标题 --><div style="background: #F8F7F7; width: 100%; height: 2rem; font-size: 0.65rem; line-height: 2rem; border: 1px solid #999; text-align: center;" >提示</div><!-- 内容 --><div style="text-indent: 50px; height: 4rem; font-size: 0.5rem; padding: 0.5rem; line-height: 1rem; "></div><!-- 按钮 --><div style="background: #418BCA; width: 80%; margin: 0 auto; height: 1.5rem; line-height: 1.5rem; text-align: center;color: #fff;margin-top: 1rem; -moz-border-radius: .128rem; -webkit-border-radius: .128rem; border-radius: .128rem;font-size: .59733rem;" onclick="closeWindow()">确 定</div>
</div>

js代码：（把jq引进来）

<script type="text/javascript">　　// 弹窗function showWindow(showmsg) {$('#showdiv').show();   //显示弹窗$('.content').append(showmsg);    //追加内容$('#cover').css('display','block'); //显示遮罩层
        }// 关闭弹窗function closeWindow() {$('#showdiv').hide();   //隐藏弹窗$('#cover').css('display','none');     //显示遮罩层$('#showdiv .content').html("");    //清空追加的内容
    }

   //调用   showWindow('js弹窗 js弹出DIV,并使整个页面背景变暗'); 

</script>

效果：

转载于:https://www.cnblogs.com/zxf100/p/8900787.html

js弹窗 js弹出DIV,并使整个页面背景变暗相关推荐

php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗
这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...
JS弹出DIV并使整个页面背景变暗功能的实现代码
1.首先写一个遮罩层div,然后再写一个弹窗的div  <div id="cover" style="background: # ...
用jQuery实现弹出窗口/弹出div层
原文链接:http://hi.baidu.com/awz_tiger/item/863cfc10c4bb0f6171d5e8d9 http://blog.163.com/qiuxinke2006@12 ...
html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
JS实现定时弹出广告
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html中利用js写一个弹出注册框,原生js实现一个弹出框
其实弹出框的实现非常的简单.网上有很多种类的弹出框,比如jquery ui 的dialog colorbox fancybox等.jquery ui的dialog是一个专业的对话框而colorbox ...
如何用python做无限弹窗_python弹出框
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! super(winform, self).init(parent) self.r ...
asp.net弹出div层，并把弹出层上的值赋值给界面
实现效果如下: 当我点击 "弹出div"后就会弹出中间的那个层,点击确定之后会把 "显示"的值赋值给 "获取弹出div中的输入值"的tex ...

js弹窗 js弹出DIV,并使整个页面背景变暗

js弹窗 js弹出DIV,并使整个页面背景变暗相关推荐

最新文章

热门文章