CODEWITHSUNDEEP
javascriptjqueryhtml
pr0cz
pr0cz

Reputation: 507

How can I change the stack order of jquery dialogs?

I am struggling with the problem of getting the dialog boxes on top of the others. If I click on the first one and then on the second one, the second one remains on top of the first one, even if I click on the link for the first one again. Can you help me? I need the first one to come back to top as someone clicks on the button again.

Thanks in advance! :)

(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>

Upvotes: 0

Views: 31

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I made a small "addition" to your code...
Playing with z-indexes an position absolute.

It works.

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

	(function() {  
		var dialog = document.getElementById('ansprechpartner-window');  
		document.getElementById('ansprechpartner').onclick = function() {  
			dialog.show();
			if($("#bildergalerie-window").css("display")!="none"){
				console.log("If a opened...");
				$("#ansprechpartner-window").css({"position":"absolute","z-index":2});
				$("#bildergalerie-window").css({"position":"absolute","z-index":1});
			}
		};  
		document.getElementById('ansprechpartner-exit').onclick = function() {  
			dialog.close();  
		};  
	})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<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>

Upvotes: 1

Related Questions