从Bootstrap弹出窗口调用模式 [英] Calling a modal from a Bootstrap popover

问题描述

如何从Bootstrap弹出窗口打开模式?我遇到了麻烦.我的示例代码如下.单击弹出窗口中的按钮不会打开模式.从页面上其他任何地方调用模式，都会启动模式.

How does one open a modal from a Bootstrap popover? I'm having trouble with that. My sample code is below. Clicking on the button in the popover does not open the modal. Calling the modal from any other place on the page launches the modal.

我正在使用以下功能来显示弹出窗口:

I am using the following function for the popover:

$( function() {
    $("[data-toggle=popover]").popover( {
        html : true,
        content : function() {
            return $('#popover-content').html();
        }
    });
}); 

这是我页面的相关HTML:

and here's the relevant HTML for my page:

<li>
<a data-toggle="popover" data-container="body" data-placement="left"
type="button" data-html="true" href="#" id="login">
<i class="zmdi zmdi-account-circle zmdi-hc-lg zmdi-hc-fw"
style="color:white; padding-top:10px;padding-right:32px">
</i>
</a>
</li>
<div id="popover-content" class="hide">
<div class="form-group" style="padding-left:0px">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">                        
<button type="button" id="button2" class="btn pull-right" style="background-color:#00c853;color:#fff; margin-top:0px" onclick="$('#changeProfileModal').modal()">   </button>
</div>
</div>
</div>
</div>

预先感谢您的协助.

推荐答案

您可能需要通过文档绑定按钮的单击(隐藏).

You might need to bind the click of the button (which is hidden) via the document.

请参见下面的示例代码(根据您的喜好调整颜色，大小等)

See sample code below (adjust colours, sizes, etc to your liking)

$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      return $('#popover-content').html();
    }
  });

  $(document).on('click', "#button2", function() {
    $('#changeProfileModal').modal('show');
  });
});

#button2 {
  background-color: #00c853;
  color: #fff;
  margin-top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<ul>
  <li>
    <a data-toggle="popover" data-container="body" data-placement="right" type="button" data-html="true" href="#" id="login">
      popover
    </a>
  </li>
</ul>
<div id="popover-content" class="hide">
  <div class="form-group" style="padding-left:0px">
    <div class="row">
      <div class="col-xs-6 col-md-6 col-lg-6">
        <button type="button" id="button2" class="btn pull-right">btn2</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="changeProfileModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

这篇关于从Bootstrap弹出窗口调用模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！