팝업이 보이지 않음 (magnific-popup으로)

내 웹 사이트에 magnific popup을 구현하려고하지만 어떤 이유로 내 테스트 이미지가 팝업 모드로 열리지 않습니다. 무엇이 문제 일 수 있습니까? 많은 감사합니다.팝업이 보이지 않음 (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

우수한 관찰 결과가 나타납니다. –

좋은 장소, 고마워! 문제가 해결되었지만 여전히 작동하지 않습니다. -/ – Greg

테스트 페이지가 여전히 동일한 오류를 가지고 있습니다 ... – epascarello

당신은 당신의 코드에서 body 아닌 head

출처

2013-05-20 17:13:27 MayMayoO

과 OP가 그 이유는 무엇입니까? – Eonasdan

문제 내부

(document).ready(function()

을 넣어해야합니다 });

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

문제를, 두 여는 스크립트 태그가

해당 항목을 미리보기 스크립트 본문 :

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

팝업이 보이지 않음 (magnific-popup으로)

답변

관련 문제