Bootstrap 3 - Popover div html

问题:

I based in this example: https://jsfiddle.net/hL0pvaty/

But the popover must contain a html div , therefore, what I want is a mixture between the first and the second link: https://maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html-content/

This is the js code:

$(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();     }); }); 

This works, but forces me to make double-click the link, and it should work with just one click.

One thing, this example is very ok, but i need apply some changes, i want the same, but from a link, i open one modal window that loaded a json file,

The json file have a image links that open the popover, as you have shown me (i am using bootstrap-table for to load the json file)

This is the json file:

[     {         "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>"     } ] 

This the js code for to load json file with bootstrap-table:

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

This is the div link html and modal window:

<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>   

Could you help me?

Thanks,

回答1:

There is a code for normalization bootstrap popovers:

• multiply popovers

• popovers with close button

• close by click outside the popover

• popover with custom HTML

Check out the demo

Source code 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');         }     });  });  

and 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> 

and 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; } 

文章来源: Bootstrap 3 - Popover div html