如果用户没有点击到其他地方，Javascript关闭对话框

在我的网站上，我用JavaScript打开了一个模式/对话框，当用户点击同一视图上的另一个选项卡时，模态仍然存在，并处于办法。所以如果用户点击模式，我想关闭它。但我不知道该怎么做，我知道OnBlur属性，但我还没有想出一个可用的解决方案。这是我的脚本：如果用户没有点击到其他地方，Javascript关闭对话框

 $("#dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     height: 220, 
     width: 305, 
     modal: true, 
     buttons: { 
      'Spara': function() { 

       if (!validateNumber()) { 
        alert('Procent måste vara mellan 0-100'); 
        return false; 
       } 
       if (!validateProject()) { 
        alert('Du måste välja ett project'); 
        return false; 
       } 
       if (!validateDate()) { 
        return false; 
       } 

       locstring = "@(Url.Action("Index"))/Update/?"; 

       locstring += '&projectId=' + $('#projectList').val(); 
       locstring += '&startDate=' + $('#startDate').val(); 
       locstring += '&endDate=' + $('#endDate').val(); 
       locstring += '&pct=' + $('#pct').val(); 

       var sid = $('#sId').text(); 
       if (sid !== "") { 
        locstring += '&id=' + sid; 
       } 

       $.ajax({ 
        type: "GET", 
        url: locstring, 
        dataType: "html", 
        success: function (data) { 
         $('#dialog').dialog('close'); 
         reloadTable(); 
        } 
       }); 
      }, 
      'Avbryt': function() { 
       $(this).dialog('close'); 
      }, 
      'Ta bort': function() { 
       var sid = $('#sId').text(); 
       if (sid != "") { 
        locstring = "@(Url.Action("Index"))/Delete/" + sid; 

        $.ajax({ 
         type: "GET", 
         url: locstring, 
         dataType: "html", 
         success: function(data) { 
          $('#dialog').dialog('close'); 
          reloadTable(); 
         } 
        }); 
       } 
      } 
     }, 
     close: function() { 
      allFields.val('').removeClass('ui-state-error'); 
     } 
    }); 

    $('#create-user').click(function() { 
      $('#dialog').dialog('open'); 
     }) 
     .hover(
      function() { 
       $(this).addClass("ui-state-hover"); 
      }, 
      function() { 
       $(this).removeClass("ui-state-hover"); 
      } 
     ).mousedown(function() { 
      $(this).addClass("ui-state-active"); 
     }) 
     .mouseup(function() { 
      $(this).removeClass("ui-state-active"); 
     }); 

});

来源

2015-10-15 Joakim Carlsson

的可能的复制[jQuery用户界面对话框：如何关闭对话框时，点击之外？]（http://stackoverflow.com/questions/8306547/jquery-ui-dialogs如何在关闭对话框时点击外部） –

有一个叫做isShowing被设置为true当对话框显示标志，并附加一个事件侦听器的身体和你的主容器，检查一个点击。然后检查标志isShowing是否为真，如果是true则隐藏对话框。

编辑1

另一种解决方案，

HTML

<div id="dialog">Some demo text here.</div> 
<div>some other demo text</div>

CSS

#dialog { 
    height: 300px; 
    width: 300px; 
    border: 2px solid orange; 
}

的JavaScript

document.addEventListener("click", function (e) { 
    if (e.target.id != "dialog") { 
     document.getElementById("dialog").style.display = "none"; 
    } 
});

这里是正在比较的元素的ID点击，如果它不等于对话框那么我们隐藏对话框。

例

http://jsfiddle.net/1e5vz8vc/

来源

2015-10-15 10:37:52 Script47

非常感谢您的快速响应。 –

它似乎是1种问题，当它关闭时它会关闭所有东西，但它仍会留下它创建的3个按钮。 –

@JoakimCarlsson删除该元素的所有子元素以使其工作。 – Script47

如果用户没有点击到其他地方，Javascript关闭对话框

回答

相关问题