zoukankan      html  css  js  c++  java
  • 当页弹出对话框的实现

    image

    用处

    1,弹出对话框;2,如果是Gif图片的话还可以用作显示Loading状态;3,Tooltips,就是内容弹出提醒

    Html代码,思路是一个背景层加一个内容层

    <div id="modalBg"></div>
    <div id="modalContent">这里是你的自定义弹出内容</div>

    CSS代码

    #modalBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=50);
    display: none;
    z-index: 10000;
    }
    
    #modalContent {
    position: absolute;
    width: 353px;
    height: 141px;
    top: 50%;
    margin-top: -80px;
    left: 50%;
    margin-left: -186px;
    padding: 10px;
    display: none;
    z-index: 10001;
    text-align: center;
    background-color: white;
    border: 1px solid white;
    border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    -o-border-radius: 5px 5px;
    -webkit-border-radius: 5px 5px;
    }

    JS/JQ代码,自动定义显示与隐藏

  • 相关阅读:
    第三章例3-3
    第三章例3-2
    第二章例2-11
    第二章例2-10
    第二章例2-9
    204
    205
    202
    203
    201
  • 原文地址:https://www.cnblogs.com/fastmover/p/3918856.html
Copyright © 2011-2022 走看看