在外面点击时关闭弹出窗口div

我有一个按钮，当我点击时，窗体会打开并由用户填充。当我再次单击该按钮时，窗体关闭。这是不可能的，因为一个按钮我不能执行2个功能，比如只用一个按钮打开和关闭窗体。所以，我拿了2个按钮。当一个按钮被点击时，它隐藏，第二个按钮显示，表单被打开，当第二个按钮被点击时，同一个按钮隐藏，第一个按钮显示，表单关闭。我在这方面没有问题。现在，我也希望当用户点击div窗体外的任何地方时，窗体应该自动关闭。帮我做到这一点。这是2个按钮。在外面点击时关闭弹出窗口div

 <input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" /> 
      <input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />

这是表格。

<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">

这是脚本。

 $(document).ready(function() { 
     $('#div_fieldWorkers').hide(); 
     $('input#NewRowCopy').hide(); }); 

    $('input#NewRow').click(function() { 
     $('input#NewRowCopy').show(); 
     $('input#NewRow').hide(); 
     $('#div_fieldWorkers').slideDown("fast"); 
    }); 
    $('input#NewRowCopy').click(function() { 
     $('input#NewRow').show(); 
     $('input#NewRowCopy').hide(); 
     $('#div_fieldWorkers').slideUp("fast"); 


    }); 

    $("html").click(function (e) { 

     if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) { 

     } 
     else 
     { 
      $("#input#NewRowCopy").hide(); 
      $("#input#NewRow").show(); 
      $("#div_fieldWorkers").slideUp("fast"); 
     }

我的努力，当形式之外点击隐藏的第二个按钮..但没有工作..

来源

2013-10-14 Manu

我建议...只是谷歌它... – Dinesh

谷歌搜索过去1.5天。这是在这里问。 – Manu

尝试

$(document).ready(function() { 
    $('#div_fieldWorkers').hide(); 
    $('input#NewRowCopy').hide(); 

    $('#NewRow').click(function (e) { 
     $('#NewRowCopy').show(); 
     $('#NewRow').hide(); 
     $('#div_fieldWorkers').stop(true, true).slideDown("fast"); 
     e.stopPropagation(); 
    }); 
    $('#NewRowCopy').click(function (e) { 
     $('#NewRow').show(); 
     $('#NewRowCopy').hide(); 
     $('#div_fieldWorkers').stop(true, true).slideUp("fast"); 
     e.stopPropagation(); 
    }); 

    $(document).click(function (e) { 
     var $target = $(e.target); 
     if ($target.closest('#div_fieldWorkers').length == 0) { 
      $("#NewRowCopy").hide(); 
      $("#NewRow").show(); 
      $("#div_fieldWorkers").stop(true, true).slideUp("fast"); 
     } 
    }) 
});

演示：Fiddle

来源

2013-10-14 05:10:28

号码不起作用 – Manu

@ user2829939查看更新 –

请在您的代码中查看，当我们点击外部任何地方时，div会关闭，但我们必须再次点击该按钮2次才能再次打开该div。这就是我想达到的目的，我不必按2次按钮 – Manu

在外面点击时关闭弹出窗口div

回答

相关问题