使用div和js脚本弹出对话框

来源：互联网发布：咋么样开淘宝店编辑：程序博客网时间：2024/05/16 01:14

使用div和js脚本弹出对话框

思路：div已经存在于网页当中，只是被隐藏了，当点击按钮时将其可见性设置为可见即可实现

实现：在网页中设置好需要弹出的窗口，为其他控件设置一个事件，当触发该事件时将窗口设置为可见

控件

<body class="bg" id="bg"><!--窗口--><div class="div1" id="div1">    <div id="div2" class="div2">        <div class="divtitle" id="divtitle">            <span class="title">欢迎使用</span>            <a class="closeimg" href="javascript:dispear()">x</a>        </div>        <img class="img" src="img/MyWechat.png">    </div></div><!--按钮--><table style="margin: auto;text-align: center;width: 100%">    <tr>        <td>            <button onmouseover="show()" onmouseleave="dispear()" class="btn">获得焦点显示窗口</button>        </td>    </tr>    <tr>        <td>            <button onclick="show()" class="btn">点击显示窗口</button>        </td>    </tr></table></body>

script 脚本

<script>    //使窗口位置居中    window.onresize = window.onload = window.onscroll = function () {        center("div1");        center("div2");        center("divtitle")    };    function center(obj) {        var div = document.getElementById(obj);        div.style.top = (document.documentElement.clientHeight - div.offsetHeight) / 2 + "px";        div.style.left = (document.documentElement.clientWidth - div.offsetWidth) / 2 + "px";    }    //显示窗口    function show() {        var div = document.getElementById("div1");        var bg = document.getElementById("bg");        bg.style.backgroundColor = "#ddd";        bg.style.opacity = "0.9";        div.style.visibility = "visible";    }    //隐藏窗口    function dispear() {        var div = document.getElementById("div1");        var bg = document.getElementById("bg");        bg.style.backgroundColor = "#fff";        div.style.visibility = "hidden";    }</script>

css样式

<style type="text/css">    .bg {        width: 100%;        height: 100%;    }    .div1 {        visibility: hidden    }    .div2 {        position: absolute;        width: 300px;        height: 350px;        top: 40px;        z-index: 2000;        background-color: rgba(0, 0, 0, 0.1);        border: 5px solid #ddd;        opacity: 30    }    .divtitle {        background-color: #f7f7f7;    }    .title {        background: #f7f7f7;        padding: 0px 20px;        line-height: 50px;        height: 40px;        font-weight: bold;        color: #666;        font-size: 20px;    }    .closeimg {        font-family: "Microsoft YaHei UI";        font-size: 30px;        color: #999;        text-decoration: none;        float: right;        padding-right: 20px;        line-height: 40px;    }    .img {        width: 300px;        height: 300px;    }    .btn {        width: 300px;        color: white;        background: #4490f7;        text-decoration: none;        padding: 10px 95px;        border-radius: 5px;        font-family: "Microsoft YaHei UI";    }</style>

演示链接

源码下载

0 0