是否可以在不是其父項的<dialog>標籤上放置div？

當showModal()打開時，<dialog>標籤將顯示它與其結束標籤之間的元素，同時禁用頁面上的所有其他元素。我的問題是：是否有可能爲特定元素重寫此行爲？例如：是否可以在不是其父項的<dialog>標籤上放置div？

HTML：

<div id="container"> 
    <dialog id="myDialog"> 
    <button id="close" type="reset">Close</button> 
    <button id="create">Add Element</button> 
    </dialog> 
</div> 

<menu> 
    <button id="openButton">Open Dialog</button> 
</menu>

CSS：

.new-element { 
    width: 50px; 
    height: 50px; 
    border: 3px solid black; 
    background-color: blue; 
    position: fixed; 
    top: 50%; 
}

JS：

const container = document.getElementById('container'); 
const openButton = document.getElementById('openButton'); 
const closeButton = document.getElementById('close'); 
const createButton = document.getElementById('create'); 
const myDialog = document.getElementById('myDialog'); 

openButton.addEventListener('click', function() { 
    myDialog.showModal(); 
}); 

closeButton.addEventListener('click', function() { 
    myDialog.close(); 
}); 

createButton.addEventListener('click', function() { 
    const div = document.createElement('div'); 
    div.classList.add('new-element') 
    container.appendChild(div); 
});

在的jsfiddle：https://jsfiddle.net/y7bkxvd4/

我想找到一種方法定位對話框頂部的藍色正方形。我意識到將新的div添加到對話框本身會容易得多，但是在溢出問題和使用反應入口模塊的情況下，我遇到了這個問題。如果不可能，很酷，我可以跟在後面。但如果是這樣，我想知道。

z-index顯然沒有效果。

來源

2017-01-23 Shane Hughes

通過「之上」你的意思是覆蓋？ – TylerH

@TylerH正確。覆蓋，在上面，等等。本質上是一個更高的'z-索引'將會做什麼。 –

這聽起來像你需要另一個DIV將佔據其中''

將<dialog>元素添加到dom的「頂層」，該頂層具有自己的堆棧順序（z-index不會影響此操作 - 嚴格按添加元素的順序進行設置）。我不相信你可以手動添加元素到這個頂層，它在諸如showModal（）之類的函數中完成。您可以在以下網址找到更多信息：https://fullscreen.spec.whatwg.org/#new-stacking-layer，但是因爲該功能尚未得到普遍支持，所以其難以找到相關文檔。例如：

要從頂層移除元素，請從頂層移除元素。

真正有用的..

一對夫婦的變通：

更改將添加元素的對話，以及與呼叫.showModal()當元素被追加。這種方法的問題是.showModal()使該元素之外的所有元素都不可用於用戶交互。這意味着您的藍色框位於頂部，但它也意味着您無法單擊其他模式上的「關閉」或「添加元素」。（注意：您還會注意到「關閉/添加元素」對話框變灰 - 您可以通過更改.new-element::backdrop{...}來覆蓋此選項，但它不會改變您無法單擊「關閉」或「添加元素「）例here（與背景除去）

更改添加元素到對話，呼叫.show()當元件被附加，並更改點擊事件爲‘打開對話框’到.show()而不是.showModal。這也允許你點擊過去的藍色框（即使它在'頂部'），但它也允許你點擊頁面上的任何地方（擊敗模式的目的）。因爲你不使用.showModal如果採取這種方法，你將需要連接關閉藍色方塊「關閉」 Click事件處理::backdrop僞元素也是不可用。 例here

我的建議是要麼使用模態插件（如引導的），或使自己與你想要的（使用Javascript）的功能。對話是技術上的經驗技術，因此試圖獲得你想要的行爲是不容易的。 This可能會盡可能接近你，但你可以通過添加你自己的「背景」來改善它。

來源

2017-01-23 22:24:30 Pat

這正是我正在尋找的 - 謝謝！我發現有趣的是，即使是在頂層概念上也能找到很多文檔，因爲它自從v37版本開始就在Chrome中使用。我也想知道爲什麼其他瀏覽器（除Opera之外）似乎對它有抵抗力。 –

是否可以在不是其父項的<dialog>標籤上放置div？

回答

相關問題