实现对话框点击其它地方关闭对话框

前言

　　工作时，很多UI组件库的样式未必是项目需要的，这个时候可能要自己手写一个，例如对话框，但写完之后项目往往有要求，点击空白处关闭对话框，之前我的解决方式都是加上透明的背景，然后点击背景就关闭了对话框，不过这种方式有个缺点，就是如果客户要点击另一个按钮，需要点第一次关闭了对话框，再点一次才能点到，那么体验感就很不好，于是我研究了UI框架里的对话框确实不需要像我那样加个背景层，经过多次试验，总算解决了这个问题，今天有空就分享给大家。

思路

　　利用mouseup等监听鼠标事件的方法(移动端就换成点击事件)，判断点击的区域是否自己要排除的区域，如果不是，就触发对话框的关闭事件。

  // 原生dom的写法
  document.documentElement.onmousedown = (e=>{
    // 如果会出现多个不同的dialog这里就用循环，现在先默认写死只有一个
    let dialog = document.getElementsByClassName("dialog")[0];
    if(dialog && !document.getElementsByClassName("dialog")[0].contains(e.target)) document.getElementsByClassName("dialog")[0].style.top = '-50%';
  })

  // jQuery的写法
  $(document).mouseup(e=>{
    let dialog = $('.dialog');
    if(dialog && !dialog.is(e.target)) dialog.css("top","-50%");
  });

完整代码：git@github.com:13632756286/Dialog.git