如何打開相片燈箱程式化jQuery Mobile

我有這張照片燈箱含有一些信息，我想用程序打開它使用$('#popupDetails').popup('open');，它可以與其他類型的彈出窗口，但它無法使用燈箱。我究竟做錯了什麼？。如何打開相片燈箱程式化jQuery Mobile

任何意見表示讚賞。

什麼有我想：

執行前對其進行初始化：

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

來源

2015-09-28 Kyle

這工作得很好：http://jsfiddle.net/1x0qxpcn/3/也許你需要一個更高版本的jQuery –

的@BasvanStein那太好了，我要去嘗試不同的版本，看看哪個適合我的情況，謝謝 – Kyle

我不知道爲什麼，但是當我在我的服務器或其他任何地方嘗試JSfiddle時，它失敗了，即使我使用2.4.1和移動1.4.1 JS和CSS就像JSfiddle – Kyle

的解決方案是在文檔準備事件執行您的JavaScript。

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

來源

2015-09-28 14:35:33

感謝您的回覆，我專注於錯誤的事物+1 – Kyle

如何打開相片燈箱程式化jQuery Mobile

回答

相關問題