• 弹框样式


    <div class="two">
    <div class="showMsg" style="text-align:center">
    <h5 class="msgTit">提示信息<span class="msgClose"></span></h5>
    <div style="padding: 50px;">
    <font class="msgCon">对不起,你所要的信息没有查到</font>
    </div>
    </div>
    </div>
    //弹框是先隐藏,后触发显示的
    //关闭弹框是一个图片,路径在下面,自己添加

    <script>
    var  _this=$(".two");
      //显示弹框
      _this.show();
      //遮罩层
      $('.cover').show();
    //关闭
    $('.msgClose').on('click',function(){
    $(this).parents('.two').hide();
    $('.cover').hide();
    })
    </script>

    //样式
    <style>
    .showMsg .guery {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }


    .cover {
    position: fixed;
    top: 0;
    left: 0;
    100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    display: none;
    z-index: 98;

    }
    .showMsg {
    border: 2px solid #3c64d2;
    zoom: 1;
    450px;
    height: 195px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -87px 0 0 -225px;
    background: #fff;
    box-sizing: border-box;
    z-index: 99;
    padding-bottom: 30px;;
    }
    .save { font-size: 18px; color: #555; text-align: left; line-height: 28px;}
    .showMsg .select { padding: 0 25px; font-size: 16px; color: #fff; background: #3c64d2; height: 34px; line-height: 34px; letter-spacing: 5px; border-radius: 5px; display: inline-block; margin: 20px auto 0 auto;}
    .showMsg h5 {
    background-image: url(../images/msg_img/msg.png);
    background-repeat: no-repeat;
    color: #fff;
    padding-left: 35px;
    height: 25px;
    line-height: 26px;
    *line-height: 28px;
    overflow: hidden;
    font-size: 14px;
    text-align: left
    }
    .msgCon { padding: 30px 30px 0 30px; font-size: 18px; color: #555; line-height: 30px; height: 60px; overflow: hidden;}
    .showMsg .content {
    padding: 46px 12px 10px 45px;
    font-size: 14px;
    height: 66px;
    }

    .showMsg .bottom {
    background: #e4ecf7;
    margin: 0 1px 1px 1px;
    line-height: 26px;
    *line-height: 30px;
    height: 26px;
    text-align: center
    }

    .showMsg .ok, .showMsg .guery {
    background: url(../images/msg_img/msg_bg.png) no-repeat 0px -560px;
    }

    .showMsg .guery {
    background-position: left -460px;
    }
    .two { display: none;}
    .msgTit { position: relative;}
    .msgClose { position: absolute; top: 5px; right: 10px; display: inline-block; 19px;cursor: pointer; height: 19px; background: url("../images/close.png") no-repeat center center; background-size: 100%;}

    </style>

     

    
    
  • 相关阅读:
    Nested Loops(嵌套循环)
    sql语句解析顺序和执行顺序
    log4j2常见配置
    log4j常见配置
    logback常见配置
    cannot change version of project facet Dynamic web module to 2.5
    oracle按照in的顺序进行排序
    win7下PLSQL Developer提示“ORA-12154: TNS:无法解析指定的连接标识符”
    前端PHP入门-005-爱情是常量还是变量
    前端PHP入门-006-表达式和运算符
  • 原文地址:https://www.cnblogs.com/jiaoaozuoziji/p/7866728.html
Copyright © 2020-2023  润新知