当我单击对话框元素外部显示的按钮时，如何触发单击事件？-PHP中文网问答

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

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>