Bootstrap 3 - 弹出框 div html

Posted 2023-05-08

【中文标题】Bootstrap 3 - 弹出框 div html

【英文标题】：Bootstrap 3 - Popover div html

【发布时间】：2016-02-11 15:05:42

【问题描述】：

我基于这个例子： https://jsfiddle.net/hL0pvaty/

但弹出框必须包含一个 html div ，因此，我想要的是第一个和第二个链接之间的混合： https://maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html-content/

这是js代码：

$(document).on("click", ".show-popover-div", function (e) 
    $('[rel="popover"]').popover(
        container: 'body',
        html: true,
        content: function () 
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        
    ).click(function(e) 
        e.preventDefault();
    );
);

这可行，但迫使我双击链接，并且只需单击一下即可。

有一件事，这个例子很好，但我需要应用一些更改，我想要相同的，但是从一个链接，我打开一个加载 json 文件的模式窗口，

json 文件有一个打开弹出框的图片链接，正如你向我展示的那样（我正在使用 bootstrap-table 来加载 json 文件）

这是json文件：

[
    
        "col1": "<a href='#'>13560431</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    ,
    
        "col1": "<a href='#'>44560422</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    
]

这是用 bootstrap-table 加载 json 文件的 js 代码：

$("#table-alert2").bootstrapTable(
    url: 'data-table-alert2b.json',
    columns: [
        field: 'col1'
    , 
        field: 'col2'   
    , ]
);

这是 div 链接 html 和模态窗口：

<div style="width: 200px; background-color: #ccc; text-align: center;" data-toggle="modal" data-target="#myModalReguOpor">
   <div>Regulatorias</div>
   <div>7</div>
</div>      
<!-- Modal regulatorias -->
<div class="modal fade bs-example-modal-lg" id="myModalReguOpor" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">            
            <div class="row">
                <div class="col-md-12">
                    <table id="table-alert2" class="table table-striped"></table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <input id="cancel" type="button" data-dismiss="modal" value="Cerrar" />
        </div>
    </div>
  </div>
</div>  

你能帮帮我吗？

谢谢，

【参考方案1】：

有一个规范化引导弹出框的代码：

多个弹出框

带有关闭按钮的弹出框

在弹出框外点击关闭

带有自定义 HTML 的弹出窗口

查看demo

源码download

    $( document ).ready(function() 

$('.popup-window').popover(
    html: true,
    title : '<button type="button" class="close" onclick="$(&quot;.popup-window&quot;).popover(&quot;hide&quot;);">&times;</button>',
    trigger: 'manual',
    content: function () 
        return $(this).next('.popup-content').html();
    
).click(function(e) 
    $(this).popover('toggle');
    $('.popup-window').not(this).popover('hide');

    e.stopPropagation();
);

$('body').on('click', function (e) 
    $('.popup-window').each(function () 
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) 
            $(this).popover('hide');
        
    );

); 

和html

        <div class="actions">

        <!-- Action  -->
        <div class="popup-window" data-placement='left'>
            <i title='Share' class="btn-popup fa fa-share-alt"></i>
        </div>
        <div class="popup-content hide">
            <div class="socialShare">
                <label class="form-group">Share:</label>
                <div class="well">
                    <a title="Share on twiiter" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-twitter-square"></i>
                    </a>
                    <a title="Share on facebook" target="_blank" href="#">
                        <i style="font-size: 40px;" class="fa fa-facebook-square"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Action -->
        <div class="popup-window" data-placement='bottom'>
            <i  title='Respond To Review' class="btn-popup fa fa-share-square-o"></i>
        </div>
        <div class="popup-content hide">
            <div class="">
                <label class="form-group">Respond To Review:</label>
                <div class="form-group">
                    <textarea class="form-control">Great song BRO!</textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary respondToReview width100" onclick="respondToReview(this);">Post Response</button>
                </div>
            </div>
        </div>



    </div>

和css

   .actions .popover-content 
    padding: 20px 40px;

.actions .popup-window,
.action-link 
    display: inline-block;
    margin-right: 5px;
    line-height: 20px;
    border-radius: 5px;
    padding: 7px;
    width: 34px;
    height: 34px;
    background-color: #2fa0e5;
    color: #fff;
    cursor: pointer;

.actions .popup-window:hover,
.actions .popup-window:focus,
.action-link:hover,
.action-link:focus 
    opacity: 0.85;

.action-link:last-child,
.actions .popup-window:last-child 
    margin-right: 0;

.btn-popup.fa 
    font-size: 20px;
    cursor: pointer;

.actions .popover-title 
    background-color: transparent;
    border-color: transparent;
    float: right;

.actions .popover-content .form-group:first-child 
    margin-top: 10px;

.actions .popover-content .well 
    background-color: transparent;
    border-color: transparent;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none;

.actions .popover-content .well a 
    margin: 0 10px 0 0;

【参考方案2】：

///HTML 
      <div id="btnSave_popover" class="div-popover">
    ///HTML content here
      </div>


///Css classes for popover
        .div-popover 
            background-color: white;
            border-radius: 8px !important;
            box-shadow: -1px 1px 9px 5px rgba(0,0,0,0.4);
            font-size: 12px;
            padding: 7px 10px;
            position: absolute;
            width: 250px;
            bottom: -4px;
        

        .div-popover:after 
            content: "";
            position: absolute;
            bottom: -10px;
            left: 175px;
            border-style: solid;
            border-width: 25px 25px 0;
            border-color: #FFFFFF transparent;
        
  .hidden 
    display: none !important;
  
///JQuery for button click 
        $("#btnSave").click(function () 
            if ($("#btnSave_popover").hasClass("hidden")) 
                $("#btnSave_popover").removeClass("hidden");
             else 
                $("#btnSave_popover").addClass("hidden");
            
        );