移动端弹窗

最新推荐文章于 2025-07-15 09:46:02 发布

原创最新推荐文章于 2025-07-15 09:46:02 发布 · 693 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

3 篇文章

订阅专栏


<%@ 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>