Question

我在这里使用类似于Vue文档中的模态组件的模态：https://vuejs.org/v2/examples/modal.html（好吧，完全一样）。

我想这样做，以便点击模态外的任何地方都可以关闭它。我该怎么做？

Answer 1

您可以使用以下代码进行操作，以便在单击任何其他内容时隐藏该消息。您可能需要更改它以使其适用于您的脚本。

//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";
    }
}

Answer 2

通过检测点击了哪个类来修复它：

  <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');
      }
    },

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

2 个答案: