How to close a modal when clicking outside

Question

I want to hide a div by clicking on the close link in it, or by clicking anywhere outside that div.

I am trying following code, it opens and close the div by clicking close link properly, but if I have problem to close it by clicking anywhere outside the 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>

Possible duplicate of [Closing Modal Popup by Clicking Away from It](http://stackoverflow.com/questions/10439779/closing-modal-popup-by-clicking-away-from-it) — Santosh Ram Kunjir, Mar 03 '16 at 13:08

score 1 · Answer 1 · answered Mar 03 '16 at 13:13

The problem is you can not have an external script and an inline script together. They need to be separate elements.

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

needs to be

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

How to close a modal when clicking outside

1 Answers1