2016-03-03 48 views
-1

我想通過單擊其中的關閉鏈接或點擊該格外的任何位置來隱藏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> 
+0

的可能的複製[關閉模式彈出通過從它馬上點擊](http://stackoverflow.com/questions/10439779/closing-modal-popup-by-點擊-外之話) –

回答

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>