最新消息:人非完美,知己不足才有前进的空间,一副无所不知的姿态,那才是井底之蛙之所为。

JS常用三种弹出对话框、警告框和JS弹出DIV层元素弹出整个页面

    我们常用的JS弹出对话框有三种,这三种比较简单,不过在这里我想要重点写出的是,JS如何弹出DIV层,以便显示出更多的信息

    先说JS常用的三种对话框,代码如下:

//====================== JS最常用三种弹出对话框 ========================  
  
    //弹出对话框并输出一段提示信息  
    function ale() {  
        //弹出一个对话框  
        alert("提示信息!");  
  
    }  
  
    //弹出一个询问框,有确定和取消按钮  
    function firm() {  
        //利用对话框返回的值 (true 或者 false)  
        if (confirm("你确定提交吗?")) {  
            alert("点击了确定");  
        }  
        else {  
            alert("点击了取消");  
        }  
  
    }  
  
    //弹出一个输入框,输入一段文字,可以提交  
    function prom() {  
        var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ,  
  
        //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值  
        if (name)//如果返回的有内容  
        {  
            alert("欢迎您:" + name)  
        }  
  
    }


    相信上面的代码都能看懂,现在重点讲JS如何弹出DIV层:

    代码如下,非常的简单

<html> 
<head> 
<title>JS弹出DIV对话框</title> 
<style> 
/*这里是弹出框的样式,可以随意修改,这里的重点是弹出DIV层*/
.black_overlay{ 
display: none;  
position: absolute;  
top: 0%;  left: 0%;  
width: 100%;  
height: 100%; 
background-color: black;  
z-index:1001;  
-moz-opacity: 0.8;  
opacity:.80;  
filter: alpha(opacity=80);  
}  
.white_content{  
display: none;  
position: absolute;  
top: 25%;  left: 25%;  
width: 50%;  
height: 50%;  
padding: 16px;  
border: 16px solid orange;
background-color: white;  
z-index:1002;  
overflow: auto;  }
</style> 
</head> 
<body> 
<p>看这里-->><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">弹出</a></p> 

<!--下面是弹出的div层-->
<div id="light" class="white_content"> 
    这里是弹出的DIV层
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
    关闭</a>
</div> 
<div id="fade" class="black_overlay"> 
</div> 

</body> 
</html>


弹出的DIV层跟你正常DIV是一样的可以添加img table li之类的元素,简单方便。


本文章已参与维权行动,如需转载请与我联系沟通!谢谢!

本文出自LY客栈-博客:JS常用三种弹出对话框、警告框和JS弹出DIV层元素弹出整个页面,原文网址:http://blog.lykezhan.com/jishu/biji/2017/0320/227.html

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

    与本文相关的文章

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    最新评论