如何捕获单击以关闭除模式之外的所有模式

您可以使用以下代码使之成为隐藏消息,以便在单击其他任何内容时将其隐藏。您可能需要更改它以使其与脚本一起工作。

//The background of the image, the area that clicking makes it close.
var modalBackground = document.getElementsById("modal-mask")[0];
window.onclick = function(e) {
    //Testing if the target is the background
    if (e.target == modalBackground ) {
        //Hides the message
        modal.style.display = "none";
    }
}

这通过检测单击了哪个类来修复它:

  <div class="modal-mask" @click="closeModal($event)">
    <div class="modal-wrapper">
      <div class="modal-dialog" role="document">

稍后在组件中:

  methods:{
    closeModal(event){
      if(event.target.className == 'modal-wrapper'){
        EventBus.$emit('hideModal');
      }
    },