Modales Popover zeigt kein Bild an

Question

Die Aufgabe besteht darin, ein einfaches Modal-Popover als Warnung für Kunden einzufügen, die über eine temporäre Verlagerung benachrichtigt werden sollen. Beim Laden der Seite wird ein transparenter Hintergrund angezeigt, aber das Bild und die Schaltfläche zum Schließen werden nicht angezeigt.

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> 

Dies scheint eine ziemlich einfache Aufgabe, aber ich kann nicht dieses Problem, indem mehrere Versuche zu lösen scheint. Ihre Hilfe wird gerne in Anspruch genommen.

Answer 1

Ich habe keine Ahnung über Popover-Plugin, aber ich habe Geige dafür mit Bootstrap-Plugin erstellt, wenn die Seite geöffnet wird Modal wird mit einigen Inhalt angezeigt werden (Sie können es durch Ihren Inhalt ersetzen).

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

Und JS

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

JSFIDDLE

Anmerkung: Ich habe nicht popover.js enthalten.