試圖在彈出框內顯示一個按鈕元素，但它沒有出現
[英]Trying to display a button element inside of a popover but it is not appearing
問題描述
我創建了一個元素，當您將鼠標懸停在收件箱圖標（font-awesome）上時，會出現一個彈出窗口。 我試圖在該彈出窗口的第二行顯示一個按鈕，但它沒有出現。 我正在使用 jquery 來顯示我的 html 元素。 標題出現了，但按鈕沒有出現。 我以為我應該將我的 html 元素用引號括起來，但這不起作用。 如果有人可以向我解釋我做錯了什么，我將不勝感激。
這是它目前的樣子：
這是我的 html。
<div id="ex4">
<span class="p1 fa-stack fa-2x has-badge" data-count="!">
<i class="fa fa-inbox" data-toggle="popover" aria-hidden="true"></i>
</span>
</div>
這是我使用 jquery 創建的函數。
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger : 'hover',
html: true,
title:'10 days remaining in your trial!',
content:'<div class="button"><button>Close<button></div>'
});
});
2 個解決方案
解決方案1
1 已采納 2020-08-27 09:56:49
我認為當您使用content:'<div class="button"><button>Close<button></div>'它會將其視為文本而不是 html 元素。 我嘗試了以下代碼，它似乎有效。
另一個觀察結果是，當您嘗試將彈出窗口與懸停事件綁定時，只要您離開圖標，彈出窗口就會關閉。 因此，您可能必須將其與 click 事件綁定。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div id="ex4"> <span class="p1 fa-stack fa-2x has-badge" data-count="!"> <i class="fa fa-inbox" data-toggle="popover" aria-hidden="true">[icon]</i> </span> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover({ html: true, title:'10 days remaining in your trial!', content: function () { return $("<div class='button'><button>Close</button></div>"); } }); }); </script> </body> </html>
解決方案2
0 2020-08-26 16:36:35
以此為參考。 它肯定會幫助你。 此彈出窗口顯示在頁面加載
window.onload = function() { document.getElementById('button').onclick = function() { document.getElementById('modalOverlay').style.display = 'none' }; };
body { background: url('https://images.unsplash.com/photo-1492518757308-3eaa20dbb0e2'); background-repeat: no-repeat; background-size: cover; font-family: Arial, Helvetica, sans-serif; } #modalOverlay { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 99999; height: 100%; width: 100%; } .modalPopup { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); background: #fff; width: 50%; padding: 0 0 30px; -webkit-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 10px 3px rgba(0,0,0,.2); box-shadow: 0 2px 10px 3px rgba(0,0,0,.2); } .modalContent {padding: 0 2em;} .headerBar { width: 100%; background: #edcb04 url(http://cognex.com/gfx/site/bg-global-header.png) repeat-x 0 0; margin: 0; text-align: center; } .headerBar img { margin: 1em .7em; } h1 { margin-bottom: .2em; font-size: 26px; text-transform: capitalize; } p {margin: .75em 0 1.5em;} .buttonStyle { border: transparent; border-radius: 0; background: #6d6d6d; color: #eee !important; cursor: pointer; font-weight: bold; font-size: 14px; text-transform: uppercase; padding: 6px 25px; text-decoration: none; background: -moz-linear-gradient(top, #6d6d6d 0%, #1e1e1e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d6d6d), color-stop(100%,#1e1e1e)); background: -webkit-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%); background: -o-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%); background: -ms-linear-gradient(top, #6d6d6d 0%,#1e1e1e 100%); background: linear-gradient(to bottom, #6d6d6d 0%,#1e1e1e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#1e1e1e',GradientType=0 ); /* -webkit-box-shadow: 0 2px 4px 0 #999; box-shadow: 0 2px 4px 0 #999; */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .buttonStyle:hover { background: #1e1e1e; color: #fff; background: -moz-linear-gradient(top, #1e1e1e 0%, #6d6d6d 100%, #6d6d6d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e1e1e), color-stop(100%,#6d6d6d), color-stop(100%,#6d6d6d)); background: -webkit-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%); background: -o-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%); background: -ms-linear-gradient(top, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%); background: linear-gradient(to bottom, #1e1e1e 0%,#6d6d6d 100%,#6d6d6d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#6d6d6d',GradientType=0 ); } .returnToProfile {text-align: center; margin:3em;} .returnToProfile a, .returnToProfile a:visited {color: #ddd;} .returnToProfile a:hover {color: #fff;}
<html> <head> <meta charset="utf-8"> <title>Modal popup</title> <script type="text/javascript"> // Place the JS here or just before the BODY close. </script> </head> <body> <div id="modalOverlay"> <div class="modalPopup"> <div class="headerBar"> <img src="https://placehold.it/200x25/edcb04/333333/?text=LOGO" alt="Logo"> </div> <div class="modalContent"> <h1>Modal window title here</h1> <p>Modal appears on page load, presents information and is dismissed after the "Close" button is clicked. Styled modal messaging, images and other information here.</p> <button class="buttonStyle" id="button">Close</button> </div> </div> </div> <!--p class="returnToProfile"><a href="https://codepen.io/ptamaro" target="_parent">Return to profile</a></p--> </body> </html>
如何用彈出窗口內的按鈕關閉bootstrap-popover？
[英]How can i close a bootstrap-popover with a button inside the popover?
引導程序Popover中元素的document.querySelector
[英]document.querySelector for element inside bootstrap Popover
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.