Question

我正在使用这个大胆的弹出式插件（http://dimsemenov.com/plugins/magnific-popup/documentation.html）

这是我非常基本的html，我只想让按钮在该页面中打开一个弹出窗口。

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    </script>-->
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script src="./js/jquery.magnific-popup.js"></script>

    <title>Burn That Burger</title>
    <script type="text/javascript" src="js/javascript.js"></script>
    <link rel="stylesheet" type="text/css" href="normalize.css" media="all">
    <link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
    <link rel="stylesheet" type="text/css" href="style/style.css" media="all">

</head>

<body>
   <div id="popup">
    test pop up goes here
    </div>

    <button>create and show popup</button>

</body>

</html>

Javascript：

$(document).ready(function () {

    $('button').magnificPopup({
        items: {
            src: '#popup',
            type: 'inline'
        }
    });
});

Answer 1

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vGAsL/19/

您已将弹出式ID应用于您的身体，而不是单独的div。

<body>
<div id="popup">
    test pop up goes here 
</div>
<button> create and show popup </button>

Answer 2

我认为你的身体标签存在问题，应该是：

<body>
<div id="popup">
test pop up goes here 
</div>

为什么我的Jquery弹出插件不起作用？

2 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/vGAsL/19/