Question

我将从头开始道歉 - 我确信这是一个愚蠢的问题，但我似乎无法找到我在这里做错了什么（包括搜索堆栈溢出，这对此有一些疑问并且它几乎是天。我基本上复制并粘贴了Magnific Popup（http://codepen.io/dimsemenov/pen/GEKgb）内联弹出窗口的示例，但即便如此也不起作用（我正在尝试不同的用法，但无论我做错了什么，它也是即便是这个简单的例子。）

代码如下，但我也做了一个JSFiddle：

http://jsfiddle.net/avogel27/RS6aR/

感谢您的帮助。

<!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=iso-8859-1" />
<title>test</title>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css"> 
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>

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

<script>

$(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
    });
});


</script>

</body>
</html>

Answer 1

你的jsfiddle的问题是你错误地添加了外部引用。它应该是http://www.metoceanpartnerships.org/js/jquery.magnific-popup.js而不是www.metoceanpartnerships.org/js/jquery.magnific-popup.js。

您还缺少弹出窗口的CSS样式：

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

http://jsfiddle.net/E8wD6/

甚至无法获得Magnific Popup内联工作的简单测试示例

1 个答案: