Question

我正在阅读关于这个巨大的弹出窗口，并希望通过阅读文档和示例创建一个，但它不起作用。这是html：

<!DOCTYPE html>
<html>
<head>
<title>True or False</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="magnific-popup.css"> 
<script src="jquery.magnific-popup.min.js"></script> 
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script> 

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style1.css"/>


</head>

<body>
<h1>True or False</h1>
<h3>Challenge your Wits!</h3>

<a href="#test-popup" class="open-popup-link">Show inline popup</a>
<!--
Alternative markup with data-mfp-src attribute:
<a href="mobile-friendly-page.html" data-mfp-src="#test-popup" class="open-popup-link">Show inline popup</a>
-->

<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
  Popup content
</div>



<br/><br/>
<button>Dynamically create and show popup</button>
</body>

</html>

这是CSS：

body{
background-image: url('sky2.jpg');
overflow: hidden;
}

h1,h3{
color: white;
font-family: 'Kalam', cursive;
text-align: center;

}

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 500px;
  margin: 20px auto;
}

这是Javascript：

$(document).ready(function() {

// Example 1: From an element in DOM
$('.open-popup-link').magnificPopup({
  type:'inline',
  midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
});

// Example: 2 Dynamically created
$('button').magnificPopup({
  items: {
      src: '<div class="white-popup">Dynamically created popup</div>',
      type: 'inline'
  },
  closeBtnInside: true
});


});

现在，我在控制台中收到错误：TypeError：e不是jquery.magnific-popup.min.js文件中的函数（随插件提供的文件。）我怀疑是否提供了javaScript文件有一些错误。我对么？或者我的代码有什么问题吗？我该如何纠正？谢谢。

Magnific popup根本不工作

0 个答案: