javascript - How to close the modal by clicking elsewhere in vue
我想大声告诉你2017-05-19 10:35:22
0
3
749
As shown in the picture, how to close this pop-up layer by clicking elsewhere? It is very simple to operate with jquery. I would like to know what is the idea to implement this function in vue?
When the modal pops up, write a mask layer overlay under the modal, the css style is position: fixed; top: 0; right: 0; bottom: 0; left: 0; and bind a click event to it to close the modal
If jquery is introduced, use jquery writing method to write on the current component, otherwise you will write native events yourself. You can refer to line 63 of the related writing method of the popover component of element.ui.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
When the modal pops up, write a mask layer overlay under the modal, the css style is
position: fixed; top: 0; right: 0; bottom: 0; left: 0;and bind a click event to it to close the modalYou can bind a click event globally and prevent the click event from bubbling on this pop-up layer to achieve the effect you want.
If jquery is introduced, use jquery writing method to write on the current component, otherwise you will write native events yourself.
You can refer to line 63 of the related writing method of the popover component of element.ui.