Модальный popover, не показывающий изображение

Question

Задача состоит в том, чтобы вставить простой модальный popover в качестве оповещения для клиентов, чтобы получать уведомление о временном перемещении. При загрузке страницы появляется прозрачный фон, но отображается изображение или кнопка закрытия.

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> 

КОД

<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, но я создал скрипку для этого, используя плагин bootstrap, когда страница будет открыта, мода будет отображаться с некоторым контентом (вы можете заменить его своим контентом).

Пример 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.