Modular window in the fashion window



  • The challenge is to open a fashion window in a fashion window. Now problem: Used fancybox 2. The first fashion window opens normally, but when it comes to the link in this fashion window, you need to open another module and the previous one hide. I've done everything in the same way as the first module, i.e. giving a link to the inner modular window href=#block-id, but clicking instead of opening the window, giving out a window of error. Please tell me what my stupidity is and how to solve the problem.



  • *{
    margin:0;
    padding:0;
    }
    html,body{
    height:100%;
    }
    .main{
    width:100%;
    height:100%;
    position:relative;
    background:white;
    }
    .mdl{
    position:absolute;
    top:50%; left:50%;
    width:800px;
    height:400px;
    background:#fefefe;
    margin:-200px -400px;
    display:none;
    z-index:11;
    }
    .btn1,.btn2{
    display:block;
    width:200px;
    padding:8px 0;
    background:lightgreen;
    margin:0 40px;
    text-align:center;
    cursor:pointer;
    }
    .js{
    position:fixed;
    top:0; left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.3);
    z-index:10;
    display:none;
    }
    .mdl1{
    width:300px;
    height:150px;
    background:pink;
    position:absolute;
    left:50%; margin-left:-150px;
    top:50%; margin-top:-75px;
    display:none;
    }
    <div class="main">
    <a class="btn1">Открыть первое окно</a>
     <div class="mdl"> 
       <a class="btn2">Открыть второе окно</a>
       <div class="mdl1"> 
        <p class="close">X</p>
      </div>
     </div>
    </div>
    <div class="js"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
    

    $(document).ready(function(){
    $(".js").click(function(){
    $(".mdl").hide();
    $(".js").hide();
    });
    $(".btn1").click(function(){
    $(".mdl").show();
    $(".js").show();
    });
    });

    </script>

    <script>

    $(document).ready(function(){
    $(".close").click(function(){
    $(".mdl1").hide();
    });
    $(".btn2").click(function(){
    $(".mdl1").show();
    });
    });

    </script>

    That's how it's done, the code's clear and it's pretty clear.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2