jquery実装モタイダイアログ

14588 ワード

js。

基本的な実装プロセス

全体のdiv{div{主要な操作領域}{}div{マスクは後ろの内容を覆うために}}

全体のdivは主に非表示表示表示

を設定する.

操作領域divは主にユーザの操作であり、

マスク領域のdivは、以下の内容をカバーするためにユーザに

を操作させない.
コードのデモ:
HTMLコード

   bootstrap  
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <form>
                    <div class="form-group">
                        <label>   :label>
                        <input type="text" name="" class="form-control">
                    div>
                     <div class="form-group">
                        <label>  :label>
                        <input type="text" name="" class="form-control">
                    div>
                     <div class="form-group">
                        <label>  :label>
                        <input type="text" name="" class="form-control">
                    div>
                    <input type="submit" name="" class="btn btn-danger" style="width:100px" value="  ">
                    <input type="button" name="" id="edit1" class="btn btn-success pull-right" style="width:100px" value="  ">
                form>
            div>
        div>
    div>
    
    
    <div class="main_pop1">
         <div class="my_modal clearfix">
            <div class="row">
                
                    <form>
                        <div class="form-group">
                            <label>   :label>
                            <input type="text" name="" class="form-control">
                        div>
                         <div class="form-group">
                            <label>  :label>
                            <input type="text" name="" class="form-control">
                        div>
                         <div class="form-group">
                            <label>  :label>
                            <input type="text" name="" class="form-control">
                        div>
                        <input type="submit" name="" id="edit" class="btn btn-danger" style="width:100px" value="  ">
                        <input type="button" name="" id="edit2" class="btn btn-success pull-right" style="width:100px" value="  ">
                    form>
                div>
            div>
        div>
        
        <div class="mask">

        div>
    div>
    
body>

モタイダイアログ領域cssコード

.mask{
    width: 100%;
    height: 100%;
    background-color: #B1BFCF;
    
    position: fixed;
    z-index: 9990;
    left: 0px;
    top: 0px;
    opacity: 0.3;
}

.my_modal {
    width: 500px;
    position: fixed;
    left: 30%;
    top: 30%;
    z-index: 9999;
    background-color: white;
}
.main_pop1{
    display: none;
}

jqueryコードのデモ:

                              
        **          **
return  false                 


 <script type="text/javascript">
      $(function(){
        //                
        $("#edit1").click(function(){
            $(".main_pop1").show('slow/400/fast');
            return false;  //          
        });
        //          
        $("#edit2").click(function(){
            $(".main_pop1").hide('slow/400/fast');
            return false;
        });
        //               
        $(document).click(function(){
            $(".main_pop1").hide('slow/400/fast');
        });
        //               
        $(".my_modal").click(function(){
            return false;
        })
      })
    script>

剣指offer:面接問題3:配列で繰り返される数字

ccf csp 2019年二題小明種果樹(続き)