彈出窗口不顯示（帶有放大鏡）

我試圖在我的網站上執行magnific popup，但由於某種原因，我的測試圖像未在彈出模式下打開。可能是什麼問題？非常感謝彈出窗口不顯示（帶有放大鏡）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Document sans nom</title> 
<!-- Scripts --> 
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" /></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="magnific-popup/jquery.magnific-popup.min.js"></script> 


    <script type="text/javascript"> 
     $(document).ready(function() { 

     $('.image-popup-vertical-fit').magnificPopup({ 
      type: 'image', 
      closeOnContentClick: true, 
      mainClass: 'mfp-img-mobile', 
      image: { 
      verticalFit: true 
      } 
     }); 
    </script> 

</head> 

<body> 
<p>Lorem ipsum dolor sit amet, <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side."> 
    <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75"> 
</a>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> 
</body> 
</html>

來源

2013-05-09 Greg

看看JavaScript控制檯。你有錯誤。

Uncaught SyntaxError: Unexpected token < testpopup.html:14

點擊錯誤信息，它把你帶到

<script type="text/javascript"> 
<script type="text/javascript">

還有就是你的問題，你有兩個開放腳本標記。

來源

2013-05-09 12:25:40 epascarello

優秀的觀察，投票。 – 2013-05-09 12:27:54

好地方，謝謝！我解決了它，但仍然無法正常工作： -/ – Greg 2013-05-09 12:33:41

以及您的測試頁仍然有相同的錯誤... – epascarello 2013-05-09 12:52:24

你應該把

(document).ready(function()

的body，而不是head

來源

2013-05-20 17:13:27 MayMayoO

，爲什麼OP應該這樣做？ – Eonasdan 2013-05-20 17:35:29

問題裏面代碼：

$(document).ready(function() { 
    $('.image-popup-vertical-fit').magnificPopup({ 
     type: 'image', 
     closeOnContentClick: true, 
     mainClass: 'mfp-img-mobile', 
     image: { 
     verticalFit: true 
     } 
});

你的問題，你有兩個開放腳本標籤：});

適當的ve腳本的rsion：

$(document).ready(function() { 
    $('.image-popup-vertical-fit').magnificPopup({ 
     type: 'image', 
     closeOnContentClick: true, 
     mainClass: 'mfp-img-mobile', 
     image: { 
     verticalFit: true 
     } 
    }); 
});

來源

2014-01-24 17:08:39

彈出窗口不顯示（帶有放大鏡）

回答

相關問題