原生dialog

攻城狮宏旭技术 2022年11月15日

0 收藏 767 点赞 4,911 浏览 956 个字

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="Generator" content="EditPlus?">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>对话框</title>
        <style>
           .posi{
           max-width:640px;
           margin:0 auto;
           height:100%;
           position:fixed;
           top:0;
           bottom:0;
           left:0;
           right:0;
           background:#65676a;
           filter:alpha(opacity=80);
           opacity: 0.8;
           z-index:10;
        }
          .pp{
           width:200px;
           height:60px;
           line-height:53px;
           position:absolute;
           top:236px;
           left:50%;
           margin-left:-100px;
           z-index:11;
           background:#F7F7F7;
           border:1px solid #F7F7F7;
           border-radius:10px;
        }
          .pp p{
           font-size:16px;
           margin-bottom:20px;
           text-align:center;
           color:#000;
        }
       </style>
       <script type="text/javascript">
        $(function(){
        $(".posi").hide();
        $(".pp").hide();
        $("#button_cl").click(function(){
            $(".posi").show();
            $(".pp").show();
            var timer=setTimeout(function(){
              $(".posi").hide();
              $(".pp").hide();
            },1000);
        })
         })
     </script>
 </head> <body>
     <div class="posi"></div>
       <div class="pp">
            <div class="po">
                <p></p>
            </div>
        </div>
 </body>
</html>