當我單擊對話框元素外部顯示的按鈕時,如何觸發單擊事件?
P粉116654495
P粉116654495 2023-08-31 23:33:50
0
1
585
<p>我在我的 Vue 3 應用程式中使用原生 HTML 對話方塊元素作為模式,並且透過使用絕對定位成功在模式的側面/外部顯示了一個按鈕。但是,由於對話方塊元素的性質以及它們在頂層的放置方式,當我單擊對話方塊元素外部的按鈕時,我無法觸發單擊事件 (displayNextModal)。調整任一元素的 z-index 都沒有效果,因為預設對話方塊總是位於頂層。我想知道是否有任何解決方法,或者觸發此單擊事件的唯一方法是將按鈕放在對話框元素內。 </p> <pre class="brush:php;toolbar:false;"><template> <dialog class="modal-post" ref="postModalRef"> <div>Modal screen</div> </dialog> <button class="next-modal-button" @click="displayNextModal">Next</button> </template></pre> <pre class="brush:php;toolbar:false;">.modal-post { width: 500px; height: 600px; } .next-modal-button { position: absolute; width: 60px; height: 30px; color: black; top: 50%; right: 10px; z-index: 1000; }</pre></p>
P粉116654495
P粉116654495

全部回覆(1)
P粉986028039

儘管它可能無法將按鈕放置在您想要的確切位置,但您始終可以將對話方塊的邊框和背景設為透明。然後在裡面有一個 div,你將其設定為看起來像對話框。並將按鈕放在對話框本身內。這將使按鈕看起來像在對話框之外,但仍然允許您存取它。不過,您將需要弄亂尺寸和絕對定位。

const favDialog = document.querySelector('.modal-post');
const showButton = document.querySelector('#showButton');
const nextButton = document.querySelector('.next-modal-button');


showButton.addEventListener('click', () => {
    favDialog.showModal();
});

nextButton.addEventListener('click', () => {
    console.log("NEXT");
});
.modal-post {
  border:0;
  background:transparent;
  height:100%
}

.next-modal-button {
  position: absolute;
  width: 60px;
  height: 30px;
  color: black;
  bottom: 20px;
  right: 10px;
  z-index: 1000;
}

.modal-body{
  background:#fff;
  border:1px solid #000;
  padding:10px;
  width: 500px;
  height: 280px;
}
<dialog class="modal-post" ref="postModalRef">
    <div class="modal-body">Modal screen</div>
    <button class="next-modal-button" @click="displayNextModal">Next</button>
  </dialog>  
  <button id="showButton">Show</button>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板