jQuery/Bootstrap popover隱藏點擊內容佔位符div

我是新的jQuery和boostrap。使用boostrap popover我已經爲單個頁面實現了多個popover。我酥料餅的HTML和JS腳本如下：jQuery/Bootstrap popover隱藏點擊內容佔位符div

<a data-toggle="popover" class="btn popper btn-default ">           
            Click me 1           
    </a> 
    <div class="popper-content hide profile-popover"> 
     This content place for click me 1 button 
    </div> 

    <a data-toggle="popover" class="btn popper btn-default ">           
     Click me 2           
     </a> 
    <div class="popper-content hide profile-popover"> 
     This content place for click me 2 button 
    </div>

對於JS腳本：

<script> 
$(document).ready(function(){ 
$('.popper').popover({ 
    placement: 'bottom', 
container: 'body', 
html: true, 
content: function() { 
    return $(this).next('.popper-content').html(); 
    } 
}); 
}); 
</script>

流行過的精品工程，但現在我想執行一個腳本，將隱藏在我的整個頁面，如果全部打開酥料餅任何人在彈出窗口內容之外點擊。

這是我的完整的代碼片段請檢查並讓我知道如何隱藏所有打開的popover，如果點擊內容的地方之外。

$(document).ready(function(){ 
 
    $('.popper').popover({ 
 
    placement: 'bottom', 
 
    container: 'body', 
 
    html: true, 
 
    content: function() { 
 
     return $(this).next('.popper-content').html(); 
 
    } 
 
}); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Popover</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h3>Popover </h3> 
 
           <a data-toggle="popover" class="btn popper btn-default ">           
 
             Click me 1 
 
              
 
           </a> 
 
            <div class="popper-content hide profile-popover"> 
 
              This content place for click me 1 button 
 
            </div> 
 

 
             <a data-toggle="popover" class="btn popper btn-default ">           
 
             Click me 2 
 
              
 
             </a> 
 
            <div class="popper-content hide profile-popover"> 
 
              This content place for click me 2 button 
 
            </div> 
 
    
 
</div> 
 

 

 

 
</body> 
 
</html>

所有的

來源

2016-10-24 livestack

只需簡單地添加文檔$（文件）。就緒功能希望您方面將得到解決的內部下列代碼：

$(document).mouseup(function (e) { 
    if(!($(e.target).hasClass("popover-content"))){ 
    $(".popover").popover('hide'); 
    } 
});

我重視jQuery和HTML代碼片段如下：

$(document).ready(function(){ 
 
    $('.popper').popover({ 
 
     placement: 'bottom', 
 
    container: 'body', 
 
    html: true, 
 
    content: function() { 
 
     return $(this).next('.popper-content').html(); 
 
     } 
 
    }); 
 

 

 
    $(document).mouseup(function (e) { 
 
      if(!($(e.target).hasClass("popover-content"))){ 
 
     \t \t $(".popover").popover('hide'); 
 
    \t \t } 
 
    }); 
 

 

 

 

 
    });

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Popover</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h3 class="popper-content dd">Popover </h3> 
 
           <a data-toggle="popover" class="btn popper btn-default ">           
 
             Click me 1 
 
              
 
           </a> 
 
            <div class="popper-content hide profile-popover"> 
 
              This content place for click me 1 button 
 
            </div> 
 

 
             <a data-toggle="popover" class="btn popper btn-default ">           
 
             Click me 2 
 
              
 
             </a> 
 
            <div class="popper-content hide profile-popover"> 
 
              This content place for click me 2 button 
 
            </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

運行和檢查w ^你的問題解決了。

來源

2016-10-26 19:37:14 Plycoder

感謝您的代碼。 – livestack

不客氣 – Plycoder

首先，確保你所有的彈出接管有一個額外的類名，你可以在同一時間針對所有的人。然後你可以使用這段代碼來遍歷並隱藏它們。

$(document).mouseup(function (e) { 
    var container = $('.popper-content'); 
    container.each(function() { 
    if (container.is(e.target) || container.has(e.target).length === 0) { 
     $(this).popover('hide'); 
    } 
    }); 
});

除非點擊位於容器內，否則彈出窗口將被隱藏。

來源

2016-10-24 21:48:05

jQuery/Bootstrap popover隱藏點擊內容佔位符div

回答

相關問題