pr0cz pr0cz - 5 months ago 17
Javascript Question

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>




Answer

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>