zoukankan      html  css  js  c++  java
  • 弹窗

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹出层效果</title>
    <link rel="stylesheet" href="css/theme.css" media="all">
    <style>
    /*弹出框*/
    *{ margin:0; padding:0}
    .new_increase{}
    .doc_mask{z-index: 9998;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.4;filter:alpha(opacity=40);display:none; }
    .doc_popover{z-index:9999;position:fixed;top:50%;left:50%;width:430px;margin:-180px 0 0 -215px;border:5px solid #e5e5e5;background:#fff;display:none;}
    .doc_poptit{padding:12px; height:20px;position: relative;}
    .doc_poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;text-shadow:0 1px 0 #ddd; font-size:16px}
    .doc_poptit .close:hover{color:#444;}
    .doc_popbod{padding:10px 50px;color:#666;}
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script>
    $(function($) {
        $('.new_increase').click(function(){
            $('.doc_mask').fadeIn(0);
            $('.doc_popover').slideDown(0);
        })
        $('.doc_poptit .close').click(function(){
            $('.doc_mask').fadeOut(0);
            $('.doc_popover').slideUp(0);
        })
    
    })
    </script>
    </head>
    <body>
    <!-- 弹出层代码开始-->
    <div> <a class="new_increase" href="javascript:;">点我</a> </div>
    <div class="doc_popover">
      <div class="doc_poptit"> <a href="javascript:;" title="关闭" class="close">x</a> </div>
      <div class="doc_popbod">
        内容区域
      </div>
    </div>
    <div class="doc_mask"></div>
    <!--弹出层代码结束 -->
    </body>
     
  • 相关阅读:
    华为"128为大整数相加"机试题
    ORA-12545: 因目标主机或对象不存在, 连接失败
    VS2010 安装使用STLPort
    Debian 入门安装与配置1
    CF1072A Palindromic Twist 思维
    解决让刷新页面时不提示 "重试或取消”对话框
    php优化及高效提速问题小结
    让Tomcat支持php
    Php邮件发送源码
    使用iconv提示未知错误
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/6085046.html
Copyright © 2011-2022 走看看