如何從在 javascript 中運行函數的按鈕啟動模態？

Question

我想啟動一個模態而不是一個由用戶單擊提交按鈕觸發的簡單警報。

這是一個簡單的測驗應用程序。

 function check() { var c = 0 var w = 0 var radios = document.getElementsByName('a'); var radios2 = document.getElementsByName('b'); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { if (radios[i].value == "a") { c++ } else { w++ } } } for (var i = 0; i < radios2.length; i++) { if (radios2[i].checked) { if (radios2[i].value == "f") { c++ } else { w++ } } } alert(`you got ${c} answers correct and ${w} answers wrong!`) } //end of check function

 <div class="end-quiz"> <input id="end-btn" type="button" name="" value="I am done!" onclick="check()"> </div>

小提琴; https://jsfiddle.net/rossmclenny/os78mury/1/

Answer 1

用 html 和 css 創建了一個彈出窗口。 這可能有幫助..

 function check() { var c = 0 var w = 0 var radios = document.getElementsByName('a'); var radios2 = document.getElementsByName('b'); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { if (radios[i].value == "a") { c++ } else { w++ } } } for (var i = 0; i < radios2.length; i++) { if (radios2[i].checked) { if (radios2[i].value == "f") { c++ } else { w++ } } } document.querySelector('#result').innerHTML = `you got ${c} answers correct and ${w} answers wrong!`; document.querySelector('#popup1').classList.add('visible'); } //end of check function document.querySelector('.close').addEventListener('click',function(){ document.querySelector('#popup1').classList.remove('visible'); });

 .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; } .overlay:target, .visible { visibility: visible; opacity: 1; } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; cursor:pointer; } .popup .close:hover { color: #06D85F; } .popup .content { max-height: 30%; overflow: auto; } @media screen and (max-width: 700px){ .popup{ width: 70%; } }

 <div class="end-quiz"> <input id="end-btn" type="button" name="" value="I am done!" onclick="check()"> </div> <div id="popup1" class="overlay"> <div class="popup"> <h2>Result</h2> <a class="close">&times;</a> <div class="content"> <p id="result"></p> </div> </div> </div>

彈出 css 參考：- https://codepen.io/imprakash/pen/GgNMXO