HTML 代码：【复制】<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jq/jquery-3.3.1.min.js"></script> <title>弹出对话框</title> <style> #test { width: 200px; margin: 30px auto; border:1px solid #cccccc; cursor:pointer; } </style> </head> <body> <div id="test">点击弹出对话框</div> <script> $(function () { var popup_window_id = 'popupWin'; //弹出的对话框span的id名称 var popup_window = '#'+popup_window_id; //为了便于jquery使用，将弹出span的id，直接加上# $(document).on('click', '#pointLine', function (event) { const _this = $(this); var X = _this.offset().left; var Y = _this.offset().top; var W = _this.width(); if ($(popup_window).length > 0) { //检测是否已经有弹出，如有，则全部关闭 $(popup_window).each(function () { $(this).remove(); }); } var popup_element = $('<span>', { id: popup_window_id, html:'<img src="images/loading.gif" align="absmiddle" /> <a href="javascript:void(0);">正在加载</a>。。。' }); $('body').append(popup_element); var popup_element_width = $(popup_window).outerWidth(); $(popup_window).css({ 'position':'absolute', 'left':(X - (popup_element_width - W)/2)+'px', 'top':(Y+29)+'px', 'text-align':'center', 'border':'1px solid #ffcc00', }); event.stopPropagation(); }); $(document).click(function (event) {//关闭空白处弹出element if ($(event.target).is(popup_window) || $(event.target).parents(popup_window).length > 0) {//点击弹出element内部时不关闭 event.stopPropagation(); } else { if ($(popup_window).length > 0) {//点击空白处关闭窗口 $(popup_window).each(function () { $(this).remove(); }); } } }); }); </script> </body> </html>