如何在外部单击时关闭模态

时间:2016-03-03 13:02:03

标签: javascript jquery html

我想通过点击其中的关闭链接或点击该div之外的任何地方来隐藏div。

我正在尝试关注代码,它会通过正确点击关闭链接打开并关闭div,但如果我有问题要通过点击div之外的任何地方来关闭它。

<div id="float_tabs">
  <ul>
    <li><a href="#sign_in"><?= Yii::t('app','Sign in'); ?></a></li>
    <li>
      <a href="#register"><?= Yii::t('app','Create an account'); ?></a>
      <button type="button" class="close" aria-hidden="true" id="open" onclick="$('.floating_box').toggle('.hide_sign_in_box');">×</button>
      <script src="jquery-1.12.0.min.js">
        $(document).ready(function () {
          $('#close').hide()
        });

        $('#open').on('click', function () {
          $('#float_tabs').show(500)
        });

        $(document).mouseup(function (e) {
          var popup = $("#float_tabs");
          if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
            popup.hide(500);
          }
        });
      </script>

1 个答案:

答案 0 :(得分:1)

问题是你不能同时拥有外部脚本和内联脚本。它们需要是独立的元素。

<script src="jquery-1.12.0.min.js">
  $(document).ready(function () {
  ...
</script>

需要

<script src="jquery-1.12.0.min.js"></script>
<script>
  $(document).ready(function () {
  ...
</script>