移动端弹窗

来源:互联网 发布:北方广电网络 编辑:程序博客网 时间:2024/05/22 02:12
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <meta charset="UTF-8">    <title>移动</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <script src="resources/js/zepto-min.js" type="text/javascript"></script>    <script type="text/javascript" src="resources/js/dialog.js"></script>    <style type="text/css">        /*  如果最外层父div层有高度和宽度后,如果父div的高度和宽度变大,子div层不会变化。             父div的高度如何随着子div的高度变化而变化,父层不给高度和宽度。给一个共享的类选择器(all_1)设置             共享的宽度和高度,子div层 继承这个类选择器        */        *{margin:0;padding:0;}        body{font-size:25px;font-family: "Open Sans", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;            color:#666;}        .all{height: auto!important;margin: auto;            font-size: 2.2rem;position:absolute;top:0;left:0;z-index: 99;}        .all_1{width:702px;height:auto;background: #FFF;}        /*标题*/        .t_title{min-width:580px;min-height:20px;margin: auto;            text-align: center;/*float: left;border: 3px solid red;*/}        .t_title .t_h3{text-align: center; font-size: 3rem;font-weight: 100;}        /*提示内容*/        .t_message{min-width: 580px;min-height:50px;margin: auto;/*float: left;*/border-bottom: 1px solid #d8d8d8;            line-height: 7rem;font-size: 2.5rem;}        .t_message span{ display: block;line-height: inherit;/*float:left;*/padding-left: 20px;            overflow: auto;color: #7d7d7d;}        /*确定按钮*/        .t_btn{min-width: 100px;min-height:30px;margin: auto;text-align: center;/*float: left;*/}        .t_btn input{ width: 105px;height: 52px;color: #fc9120;border: 0;            background: #fff;margin: 19px auto;font-size: 2.7rem;}        .t_btn input:hover{background:#EAEAEA;outline:none; }        /*阴影*/        .tz_yy{width: 100%;height: 100%;background: #000;opacity: 0.4;filter: alpha(opacity=40);position: fixed;  top:0;left: 0;}        /*.clear_both{clear:both;}*/    </style></head><body><div class="all all_1">    <div class="all_1  t_title ">        <span class="t_h3">是否支付成功?</span>        <%--   <div class="t_clear"></div>--%>    </div>    <%--    <div class="clear_both "></div>--%>    <div class="all_1 t_message">        <span class="t_con">很抱歉,支付失败!</span>    </div>    <%--    <div class="clear_both"></div>--%>    <div class="all_1 t_btn">        <input type="button" value="确定" id="qd"/>    </div>    <%--    <div class="clear_both"></div>--%></div><div class="tz_yy"></div><script type="text/javascript">    $("#qd").click(function(){        alert(3)        $.dialog();    });</script></body></html>
0 0
原创粉丝点击