CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-modalpopover
Dan Soares
Dan Soares

Reputation: 380

Calling a modal from a Bootstrap popover

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

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>

Thanks in advance for assisting me with this.

Upvotes: 3

Views: 4083

Answers (1)

blurfus
blurfus

Reputation: 14031

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

Upvotes: 6

Related Questions