zoukankan      html  css  js  c++  java
  • 模态对话框

    HTML:

        <div class="modal hide">
            <form action="/classes.html" method="post">
                <input type="text" id='caption' name="caption" placeholder="标题">
                <input type="submit" value="确定">
                <input type="button" id="modal_ajax" value="Ajax确定">
                <input type="button" id="id_modal_cancel" value="取消">
            </form>
        </div>
        <div class="shade hide"></div>

    css:

    .modal{
                 position: fixed;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 400px;
                margin-top: -250px;
                margin-left: -250px;
                z-index: 100;
                background-color: white;
            }
    
    
     .shade{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                border: 0;
                width: 100%;
                height: 100%;
                background-color: black;
                {#透明度#}
                opacity: 0.5;
                z-index: 99;
            }
    
        .hide{
                display: none;
            }

    js: 

    弹窗模态对话框,

    id_add 是弹出模态对话框按钮的id
      function  bindAddEvent() {
                $('#id_add').click(function () {
                    $('.modal,.shade').removeClass('hide');
    
                });
            }

    关闭模态对话框:

    id_modal_cancel是关闭模态对话框按钮的id
            function  bindCancelEvent() {
                $('#id_modal_cancel').click(function () {
                    $('.modal,.shade,.remove').addClass('hide');
    
                });
            }
  • 相关阅读:
    win7同时安装python2和python3
    Centos6.8安装python3.6
    Typescript的接口
    ES5中的类相关/Typescript的类相关
    Typescript介绍
    Global Interpreter Lock 全局解释器锁
    Go语言设计模式(五)
    Go语言设计模式(四)
    Go语言反射
    Go语言程序设计(三)
  • 原文地址:https://www.cnblogs.com/gaizhongfeng/p/9977212.html
Copyright © 2011-2022 走看看