popover 相关问题

我使用 bootstrap 3 popover。现在我想要文本 popvover 上的链接。代码：我使用 bootstrap 3 popover. 现在我想要文本 popvover 上的链接。代码： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href="" title="test add link">link on content</a>" data-original-title="test title" > test link </a> 但是当我在 html 中开始代码时，我看到： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href=" "="">link on content</a> " data-original-title="test title" > test link 我知道符号中的问题"但我不知道在链接中添加链接... 请告诉我如何编写正确的代码？附言：如果问题已经存在，请给我链接。您需要在初始化弹出窗口时传递具有值html的true选项，如下所示。演示 JS： $("[data-toggle=popover]") .popover({html:true}) HTML： <a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title" target="_blank" > test link </a> 只需使用属性data-html="true". <button data-toggle="popover" data-content="Link: <a href='xyz.com'>XYZ</a>" data-html="true"> CLICK </button> 我使用了 data-trigger="focus" 并且弹出窗口内容中的链接有问题。如果在链接上单击鼠标按钮并按住一段时间，则弹出窗口会消失并且链接“不起作用”。一些客户对此表示抱怨。 HTML <a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href='/' title='test add link'>link on content</a>" data-original-title="test title">test link</a> JS $("[data-toggle=popover]").popover({html:true}) 您可以在这里重现问题. 我使用以下代码来解决问题： data-trigger="manual" 在 html 和 $("[data-toggle=popover]") .popover({ html: true}) .on("focus", function () { $(this).popover("show"); }).on("focusout", function () { var _this = this; if (!$(".popover:hover").length) { $(this).popover("hide"); } else { $('.popover').mouseleave(function() { $(_this).popover("hide"); $(this).off('mouseleave'); }); } }); 如果你想使用焦点 and 弹出窗口内的链接，你需要防止弹出窗口在点击内部时关闭。我找到的最干净的解决方案是在具有preventDefault类的Popup中.popover点击 $('body') .on('mousedown', '.popover', function(e) { e.preventDefault() }); }); <a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a> 只需添加 data-html="true" 即可使用链接属性 :) 值得注意的是，虽然给出的答案是正确的 - 当应用 data-trigger="focus" 时，链接会导致问题。正如我从客户发现如果在弹出窗口上快速发生单击，链接将被操作，如果用户按住他们的鼠标按钮然后不幸的是触发器启动并出现弹出窗口。因此，简而言之，请考虑是否需要链接并计划点击次数。 $("body").on("mousedown",".my-popover-content a",function(e){ document.location = e.target.href; }); 对我有用：基本上，把事情掌握在自己手中。同样，这是带有弹出选项 html: true、sanitize: false 和 trigger : "focus"

html hyperlink twitter-bootstrap-3 popover

回答 7 投票 0

将鼠标悬停在一个弹出窗口上时如何更改 div 的数据到另一个 jquery

我用数据表创建了一个表，并使用 django 模板获取数据。在表的最后一列中，我添加了信息图标并在悬停时添加了弹出框。我得到了不同的数据......

javascript python html jquery popover

回答 0 投票 0

无法将 Input 元素集中在 jQuery UI 对话框中的 Bootstrap Popover 中

我很难让它发挥作用。我有一个链接可以打开一个包含链接的 jQuery UI 对话框。这些链接会打开一个包含输入字段的 Bootstrap 弹出窗口。出于某些原因...

jquery-ui twitter-bootstrap jquery-ui-dialog popover

回答 3 投票 0

创建一个弹出窗口以在 chrome 扩展程序中保存选定的文本

我正在创建一个 Chrome 扩展程序，并希望在选择某些文本时创建一个弹出窗口（参见图像）并将该文本保存在扩展程序中。我想要这样的弹出窗口到目前为止，我已经创建了

javascript html google-chrome-extension popover

回答 0 投票 0

在离子选择选项中更改 div 的属性

我想在具有属性“< div >”的离子选择选项行旁边添加一些小圆圈。我尝试了几个选项，但没有一个按预期工作。希望有人...

angular ionic-framework popover ion-select

回答 1 投票 0

如果按钮在弹出框内，如何更改它的样式？

我有这个弹出窗口： .dashboardViews-btnActive { 背景色：#ffa500 !important; 颜色：#fff； } 我有这个弹出窗口： .dashboardViews-btnActive { background-color: #ffa500 !important; color: #fff; } <button data-toggle="popoverB" id="bookmarkB" style="background:#0070c0; border: 0px !important; color:white;" data-placement="bottom" title="Quarter Selection"> <i class="fa fa-bookmark bookmarkIcon"></i> </button> <div id="popover-baseline" style="display:none;"> <div class="row" style="height: 25px;margin: 0px;"> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q1_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px;" onclick="Q1_BClick();"> Q1 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q2_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:3px;" onclick="Q2_BClick();"> Q2 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q3_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:5px;" onclick="Q3_BClick();"> Q3 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q4_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:7px;" onclick="Q4_BClick();"> Q4 </button> </div> </div> </div> 它是用这段代码在 JavaScript 中呈现的： $('#bookmarkB').on('click', function () { // Set the options for the popover var popoverOptions = { content: $('#popover-baseline').html(), html: true, placement: 'bottom', trigger: 'click', sanitize: false, id: 'popover_baseline' }; // Initialize the popover $('#bookmarkB').popover(popoverOptions); // Show the popover $('#bookmarkB').popover('show'); }); 我正在尝试在单击时更改每个按钮的类别。类应该改变它的颜色，但它不工作。 function Q1_BClick() { if ($('#btn_Q1_B').hasClass('dashboardViews-btnActive')) { $('#btn_Q1_B').removeClass('dashboardViews-btnActive'); } else { $('#btn_Q1_B').addClass('dashboardViews-btnActive'); } } 这是弹出窗口的屏幕截图：你可以使用 jQuery 中的 toggleClass，我真的认为没有必要为每个按钮定义不同的 onclick 函数：也许你可以试试： <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q1_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px;" onclick="clicked(this)"> Q1 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q2_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:3px;" onclick="clicked(this)"> Q2 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q3_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:5px;" onclick="clicked(this)"> Q3 </button> </div> <div class="col-3" style=" padding-left: 5px; height:100%;"> <button id="btn_Q4_B" class="dashboardViews-btn dashboardViews-btnActive" style="height:100%; width:46px; margin-left:7px;" onclick="clicked(this)"> Q4 </button> </div> </div> 和js function clicked(element) { $('#'+element.id).toggleClass('dashboardViews-btnActive') } 我使用这段代码来切换类。我发现由于在 popover 中呈现的 div 只是隐藏的，所以它创建了一个重复的元素。一个来自 popover 内容内部，一个来自隐藏的 div. $('.popover-body').find('#btn_Q1_B').toggleClass('dashboardViews-btnActive');

javascript popover

回答 2 投票 0

popover 相关问题

最新问题