我正在努力解决将对话框放在其他对话框之上的问题。如果我点击第一个,然后点击第二个,第二个保持在第一个之上,即使我再次单击第一个链接。你能帮助我吗?当有人再次点击按钮时,我需要第一个回到顶部。
提前致谢! :)
(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>
&#13;
答案 0 :(得分:1)
我做了一个小小的&#34;添加&#34;你的代码...
使用z-index进行绝对位置。
有效。
(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;