ブートストラップ・ポップ・オーバーからモーダルを呼び出す

Question

ブートストラップ・ポップ・オーバーからどのようにモーダルを開くのですか？私はそれに問題があります。私のサンプルコードは以下の通りです。ポップオーバーのボタンをクリックしてもモーダルは開きません。ページ上の他の場所からモーダルを呼び出すと、モーダルが開始されます。

私はポップオーバーのために次の関数を使用しています：これで私を支援するため、事前に

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

、ここでは私のページに関連するHTMLです。

Answer 1

文書を介してボタンのクリック（非表示）をバインドする必要がある場合があります。

、以下を参照してくださいサンプルコード（お好みに合わせて色、サイズなどを調整）

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