原生dialog | dialog

<!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>