如何从运行javascript函数的按钮启动模态？

问题描述

我想启动一个模式警报，而不是由用户单击提交按钮触发的简单警报。

这是一个简单的测验应用程序。

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/

解决方法

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