zoukankan      html  css  js  c++  java
  • query简洁弹出层代码

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jquery简洁遮罩弹出层代码</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="style.css">
    </head>

    <body>
    <div class="checkbox">
    <a href="javascript:0;" class="cd-popup-trigger0">样式1</a>
    <a href="javascript:0;" class="cd-popup-trigger1">样式2</a>
    <a href="javascript:0;" class="cd-popup-trigger2">样式3</a>
    <a href="javascript:0;" class="cd-popup-trigger3">样式4</a>
    </div>
    <!--弹框-->
    <div class="cd-popup">
    <div class="cd-popup-container">
    <p>几种常见的简洁弹框</p>
    <div class="cd-buttons">
    自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
    </div>
    <a href="#0" class="cd-popup-close">close</a>
    </div>
    </div>

    <div class="cd-popup1">
    <div class="cd-popup-container1">
    <p>几种常见的简洁弹框</p>
    <div class="cd-buttons">
    自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
    </div>
    <a href="#0" class="cd-popup-close">close</a>
    </div>
    </div>

    <div class="cd-popup2">
    <div class="cd-popup-container2">
    <p>几种常见的简洁弹框</p>
    <div class="cd-buttons">
    自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
    </div>
    <a href="#0" class="cd-popup-close">close</a>
    </div>
    </div>

    <div class="cd-popup3">
    <div class="cd-popup-container3">
    <p>几种常见的简洁弹框</p>
    <div class="cd-buttons">
    自定义整体容器宽高度及内容,高度可自适应可固定,样式可以定义自己喜欢的样式,这里就不做美观了
    </div>
    <a href="#0" class="cd-popup-close">close</a>
    </div>
    </div>
    <script type="text/javascript">
    /*弹框JS内容*/
    jQuery(document).ready(function($){
    //打开窗口
    $('.cd-popup-trigger0').on('click', function(event){
    event.preventDefault();
    $('.cd-popup').addClass('is-visible');
    //$(".dialog-addquxiao").hide()
    });
    //关闭窗口
    $('.cd-popup').on('click', function(event){
    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
    event.preventDefault();
    $(this).removeClass('is-visible');
    }
    });
    //ESC关闭
    $(document).keyup(function(event){
    if(event.which=='27'){
    $('.cd-popup').removeClass('is-visible');
    }
    });

    //打开窗口
    $('.cd-popup-trigger1').on('click', function(event){
    event.preventDefault();
    $('.cd-popup1').addClass('is-visible1');
    //$(".dialog-addquxiao").hide()
    });
    //关闭窗口
    $('.cd-popup1').on('click', function(event){
    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup1') ) {
    event.preventDefault();
    $(this).removeClass('is-visible1');
    }
    });
    //ESC关闭
    $(document).keyup(function(event){
    if(event.which=='27'){
    $('.cd-popup1').removeClass('is-visible1');
    }
    });

    //打开窗口
    $('.cd-popup-trigger2').on('click', function(event){
    event.preventDefault();
    $('.cd-popup2').addClass('is-visible2');
    //$(".dialog-addquxiao").hide()
    });
    //关闭窗口
    $('.cd-popup2').on('click', function(event){
    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup2') ) {
    event.preventDefault();
    $(this).removeClass('is-visible2');
    }
    });
    //ESC关闭
    $(document).keyup(function(event){
    if(event.which=='27'){
    $('.cd-popup2').removeClass('is-visible2');
    }
    });

    //打开窗口
    $('.cd-popup-trigger3').on('click', function(event){
    event.preventDefault();
    $('.cd-popup3').addClass('is-visible3');
    //$(".dialog-addquxiao").hide()
    });
    //关闭窗口
    $('.cd-popup3').on('click', function(event){
    if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup3') ) {
    event.preventDefault();
    $(this).removeClass('is-visible3');
    }
    });
    //ESC关闭
    $(document).keyup(function(event){
    if(event.which=='27'){
    $('.cd-popup3').removeClass('is-visible3');
    }
    });
    });
    </script>
    <div style="text-align:center;">

    </div>

    </body>
    </html>

    https://www.tongbiao.xyz/
  • 相关阅读:
    服务器时间同步
    CentOS7.1下生产环境Keepalived+Nginx配置
    Windows 客户端时间更新脚本NTP
    keepalived的配置详解(非常详细)
    Keepalived stable tarball
    keepalived配置主从备份
    ECharts使用心得总结
    C#项目获取当前时间的农历时间
    如何测试连接MsSQL数据库-------UDL文件
    为什么 管理工具里没有Internet(IIS)管理器选项
  • 原文地址:https://www.cnblogs.com/tongbiao/p/6764758.html
Copyright © 2011-2022 走看看