如何更改jquery对话框的堆栈顺序？

Question

我正在努力解决将对话框放在其他对话框之上的问题。如果我点击第一个，然后点击第二个，第二个保持在第一个之上，即使我再次单击第一个链接。你能帮助我吗？当有人再次点击按钮时，我需要第一个回到顶部。

提前致谢！ ：）

＆＃13;

＆＃13;

(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();  
    };  
})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我做了一个小小的＆＃34;添加＆＃34;你的代码...
使用z-index进行绝对位置。

有效。

＆＃13;

＆＃13;

(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();  
		};  
	})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;