Wie kann ich die Stapelreihenfolge von Jquery-Dialogen ändern?

Question

Ich kämpfe mit dem Problem, die Dialogfelder auf die anderen zu bekommen. Wenn ich auf den ersten und dann auf den zweiten klicke, bleibt der zweite über dem ersten, auch wenn ich auf den Link für den ersten klicke. Kannst du mir helfen? Ich brauche den ersten, der zurückkommt, wenn jemand wieder auf den Knopf klickt.

Vielen Dank im Voraus! :)

(function() { 
 
    var dialog = document.getElementById('bildergalerie-window'); 
 
    document.getElementById('bildergalerie').onclick = function() { 
 
     dialog.show(); 
 
    }; 
 
    document.getElementById('bildergalerie-exit').onclick = function() { 
 
     dialog.close(); 
 
    }; 
 
})(); 
 

 
(function() { 
 
    var dialog = document.getElementById('ansprechpartner-window'); 
 
    document.getElementById('ansprechpartner').onclick = function() { 
 
     dialog.show(); 
 
    }; 
 
    document.getElementById('ansprechpartner-exit').onclick = function() { 
 
     dialog.close(); 
 
    }; 
 
})();

<a href="#" id="bildergalerie">First Button</a> 
 
    <a href="#" id="ansprechpartner">Second Button</a> 
 

 

 

 
<dialog id="bildergalerie-window"> 
 
    <iframe src="#">aaa</iframe> 
 
    <button id="bildergalerie-exit">close A. </button> 
 
</dialog> 
 

 
    
 
    <dialog id="ansprechpartner-window"> 
 
    <iframe src="#">bbb</iframe> 
 
    <button id="ansprechpartner-exit">close B. </button> 
 
</dialog>

Answer 1

machte ich eine kleine "Ergänzung", um Ihren Code ...
Spiele mit Z-Indizes eine Position absolut.

Es funktioniert.

(function() { 
 
\t \t var dialog = document.getElementById('bildergalerie-window'); 
 
\t \t document.getElementById('bildergalerie').onclick = function() { 
 
\t \t \t dialog.show(); 
 
\t \t \t if($("#ansprechpartner-window").css("display")!="none"){ 
 
\t \t \t \t console.log("If b opened..."); 
 
\t \t \t \t $("#bildergalerie-window").css({"position":"absolute","z-index":2}); 
 
\t \t \t \t $("#ansprechpartner-window").css({"position":"absolute","z-index":1}); 
 
\t \t \t } 
 
\t \t }; 
 
\t \t document.getElementById('bildergalerie-exit').onclick = function() { 
 
\t \t \t dialog.close(); 
 
\t \t }; 
 
\t })(); 
 

 
\t (function() { 
 
\t \t var dialog = document.getElementById('ansprechpartner-window'); 
 
\t \t document.getElementById('ansprechpartner').onclick = function() { 
 
\t \t \t dialog.show(); 
 
\t \t \t if($("#bildergalerie-window").css("display")!="none"){ 
 
\t \t \t \t console.log("If a opened..."); 
 
\t \t \t \t $("#ansprechpartner-window").css({"position":"absolute","z-index":2}); 
 
\t \t \t \t $("#bildergalerie-window").css({"position":"absolute","z-index":1}); 
 
\t \t \t } 
 
\t \t }; 
 
\t \t document.getElementById('ansprechpartner-exit').onclick = function() { 
 
\t \t \t dialog.close(); 
 
\t \t }; 
 
\t })();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<a href="#" id="bildergalerie">First Button</a> 
 
\t <a href="#" id="ansprechpartner">Second Button</a> 
 

 

 

 
\t <dialog id="bildergalerie-window"> 
 
\t \t <iframe src="#">aaa</iframe> 
 
\t \t <button id="bildergalerie-exit">close A. </button> 
 
\t </dialog> 
 

 
\t  
 
\t <dialog id="ansprechpartner-window"> 
 
\t \t <iframe src="#">bbb</iframe> 
 
\t \t <button id="ansprechpartner-exit">close B. </button> 
 
\t </dialog>