我根據(jù) w3schools 上的示例創(chuàng)建了一個模態(tài)對話。但我一直無法找到有關(guān)如何使其非模態(tài)的指導(dǎo)。即是否可以顯示對話并且我仍然可以在后臺按鏈接？實際上，我想要實現(xiàn)的是允許對話框內(nèi)的鏈接可單擊，并允許其后面主頁上的 JavaScript 對這些事件做出反應(yīng)。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="connect-src * 'unsafe-inline';"> <style>/* The Modal (background) */.modal { display:block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow-y: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content/Box */.modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */}/* The Close Button */.close { color: #aaa; float: right; font-size: 28px; font-weight: bold;}.close:hover,.close:focus { color: black; text-decoration: none; cursor: pointer;} </style> </head><body> <a href='#'>Press me press me I am blocked</a> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close" onclick="modalHide()">×</span> <div id="modtext">Some text in the Modal..</div> </div> </div> <script> function modalHide(){ document.getElementById("myModal").style.display = "none"; } </script></body></html>
如何顯示非模態(tài)/非模態(tài) HTML/JavaScript 對話
料青山看我應(yīng)如是
2024-01-11 16:14:04
