The task is to open a modal window in a modal window. Now about the problem: I use fancybox 2. The first modal window opens normally, but when you click on a link in this modal window, you need to open one more modalku and hide the previous one. I did everything by analogy as on the first modalke, i.e. gave the link in the internal modal window href = "# block-id", but when clicked instead of opening the window, it gives an error window. Please tell me what is my stupidity and how to solve the problem.

  • " open a modal window in a modal window " You made me revise my whole life. Does "modal window" now mean something else? - PinkTux
  • 2
    jsfiddle.net/soledar10/9byw9y0u - soledar10

1 answer 1

*{ 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>

This is actually how it is done, the code is transparent and everything is quite clear.

  • Yes, thank you very much! - Artem Chentsov
  • for God's sake, this is an example but not the pro level - user33274
  • @MaksimLensky and how to do it in pure javascript-e - Anton
  • I don’t know how to do it on native js ... I didn’t teach, jquery behind my eyes is hawatt - user33274