點擊以外的任何地方它

Question

我關閉彈出窗口是能夠成功地加載自動添加一個彈出頁面加載時：

//with this first line we're saying: "when the page loads (document is ready) run the following script" 
 
$(document).ready(function() { 
 
    //select the POPUP FRAME and show it 
 
    $("#popup").hide().fadeIn(1000); 
 

 
    //close the POPUP if the button with id="close" is clicked 
 
    $("#close").on("click", function (e) { 
 
    e.preventDefault(); 
 
    $("#popup").fadeOut(1000); 
 
    }); 
 
});

/*we need to style the popup with CSS so it is placed as a popup does*/ 
 
#popup { 
 
    display:none; 
 
    position:absolute; 
 
    margin:0 auto; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    box-shadow: 0px 0px 50px 2px #000; 
 
} 
 

 
body { 
 
    background:url('http://i.imgur.com/kO2Ffje.png?1') center top; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- let's call the following div as the POPUP FRAME --> 
 
<div id="popup" class="popup panel panel-primary"> 
 

 
    <!-- and here comes the image --> 
 
    <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup"> 
 

 
    <!-- Now this is the button which closes the popup--> 
 
    <div class="panel-footer"> 
 
    <button id="close" class="btn btn-lg btn-primary">Close button</button> 
 
    </div> 
 

 
    <!-- and finally we close the POPUP FRAME--> 
 
    <!-- everything on it will show up within the popup so you can add more things not just an image --> 
 
</div>

（每How do I make an image automatically popup on my main page when someone goes to it?的指令），

但我不想點擊一個按鈕來關閉彈出窗口，我想知道如何修改javascript，以便在您點擊它之外的任何地方時關閉它。

Answer 1

你只需要添加一個div（.mask例如）誰將在彈出下面。 （你可以添加背景與不透明度，只是爲了效果）。

如果點擊它（或按鈕）隱藏彈出窗口。

//with this first line we're saying: "when the page loads (document is ready) run the following script" 
 
$(document).ready(function() { 
 
    //select the POPUP FRAME and show it 
 
    $("#popup,.mask").hide().fadeIn(1000); 
 

 
    //close the POPUP if the button with id="close" is clicked 
 
    $("#close,.mask").on("click", function (e) { 
 
    e.preventDefault(); 
 
    $("#popup,.mask").fadeOut(1000); 
 
    }); 
 
});

/*we need to style the popup with CSS so it is placed as a popup does*/ 
 
#popup { 
 
    display:none; 
 
    position:absolute; 
 
    margin:0 auto; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    box-shadow: 0px 0px 50px 2px #000; 
 
} 
 

 
body { 
 
    background:url('http://i.imgur.com/kO2Ffje.png?1') center top; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.mask { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- let's call the following div as the POPUP FRAME --> 
 
<div id="popup" class="popup panel panel-primary"> 
 

 
    <!-- and here comes the image --> 
 
    <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup"> 
 

 
    <!-- Now this is the button which closes the popup--> 
 
    <div class="panel-footer"> 
 
    <button id="close" class="btn btn-lg btn-primary">Close button</button> 
 
    </div> 
 

 
    <!-- and finally we close the POPUP FRAME--> 
 
    <!-- everything on it will show up within the popup so you can add more things not just an image --> 
 
</div> 
 
<div class="mask"></div>