从Bootstrap弹出窗口调用模式

Dan Soares 发表于 Dev

丹·苏亚雷斯|

如何从Bootstrap弹出窗口打开模式？我遇到了麻烦。我的示例代码如下。单击弹出窗口中的按钮不会打开模式。从页面上的任何其他位置调用模式将启动模式。

我正在为弹出框使用以下功能：

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

这是我页面的相关HTML：

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

在此先感谢您为我提供帮助。

模糊

您可能需要通过文档绑定按钮的单击（已隐藏）。

请参阅下面的示例代码（根据您的喜好调整颜色，大小等）

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