Как открыть лайтбокс фото программно JQuery Mobile

Question

У меня есть это фото лайтбокс, содержащее некоторую информацию, и я хотел бы открыть его программно с помощью $('#popupDetails').popup('open');, он работает с другими типами всплывающих окон, но он не работает с лайтбоксами , Что я делаю не так?.

Любые советы приветствуются.

Что есть я пробовал:

• Инициализация его перед выполнением:

  $('#popupDetails').popup();
$('#popupDetails').popup('open');

• Эмуляция нажмите на <a href="#popupDetails" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" alt="Details"></a>, но это не профессионально.

Мой код:

$('#popupDetails').popup(); 
 
$('#popupDetails').popup('open');

.detail { 
 
    font-size: 20px; 
 
    color: #72a9dc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> 
 

 
<a href="#popupDetails" data-rel="popup" data-position-to="window" data-transition="fade"> 
 
    <img class="popphoto" alt="Details"> 
 
</a> 
 

 
<div data-role="popup" id="popupDetails" data-overlay-theme="b" data-theme="b" data-corners="false" style="margin-top:20px"> 
 
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"></a> 
 
    <div style="text-align:center;" alt="Item Details"> 
 
    <span class="detail">Code:</span> 
 
    <p>123</p> 
 
    <span class="detail">User:</span> 
 
    <p>John T. Dock</p> 
 
    <span class="detail">Title:</span> 
 
    <p>A Huge Task</p> 
 
    <span class="detail">Description:</span> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <span class="detail">Module:</span> 
 
    <p>Accounting</p> 
 
    <span class="detail">Customer:</span> 
 
    <p>John F. Duck</p> 
 
    <span class="detail">Date:</span> 
 
    <p>12/12/2015</p> 
 
    <span class="detail">Priority:</span> 
 
    <p>High</p> 
 
    <span class="detail">Sorting:</span> 
 
    <p>99</p> 
 
    </div> 
 
</div>

Answer 1

Решение выполнить ваш JavaScript в документ, готовый событие.

// popup ready to fire 
$(document).ready(function() { 
    $('#popupDetails').popup('open'); 
});