モーダル・ポップオーバーがイメージを表示しない

Question

一時的な再配置の通知をクライアントに送信するアラートとして、単純なモーダル・ポップ・オーバーを挿入することです。ページが読み込まれると、透明な背景が表示されますが、画像も閉じるボタンも表示されます。

DATA

<link rel="stylesheet" href="../css/bootstrap.min.css"> 
<link rel="stylesheet" href="../css/bootstrap-theme.min.css"> 
<script src="../js/bootstrap-modal.js"></script> 
<script src="../js/popover.js"></script> 
<script src="../js/jquery-1.12.4.js"></script> 
<script src="../js/bootstrap.min.js"></script> 

<script type="text/javascript"> 
    $(window).load(function(){ 
     $('#myModal').modal('show'); 
    }); 
</script> 

<style> 
.modalDialog { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalContent { 
    width: 750px; 
    z-index: 10000; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: none; 
    background: -moz-linear-gradient; 
    background: -webkit-linear-gradient; 
    background: -o-linear-gradient; 
} 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 
</style> 

CODE

<div id="myModal" class="modal fade in"> 
<div class="modalDialog"> 
<div class="modalContent"> 
<a href="#close" title="Close" class="close">X</a> 
<img src="image.jpg" width="750px"/> 
</div> 
</div> 
</div> 

これはかなり単純な作業のように思えるが、私は、複数の試行することで、この問題を解決するように見えることはできません。あなたの助けが大変ありがとうございます。

Answer 1

popover pluginについてはわかりませんが、ブートストラッププラグインを使用してこれを作成しています。ページが開いたらモーダルにコンテンツが表示されます（コンテンツで置き換えることができます）。

サンプルHTML：

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

そしてJS

$(document).ready(function(){ 
$("#myModal").modal('show'); 
}); 

JSFIDDLE

注：私はpopover.jsを含みませんでした。