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

Question

I'm using this magnific pop up plug in ( http://dimsemenov.com/plugins/magnific-popup/documentation.html ) 我正在使用这个宏伟的弹出式插件（ http://dimsemenov.com/plugins/magnific-popup/documentation.html ）

This is my very basic html, I simply want the button to open a pop up window in that page. 这是我非常基本的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: 使用Javascript：

$(document).ready(function () {

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

Answer 1

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

you have applied the popup id to your body, instead of a separate div. 您已将弹出窗口ID应用于您的身体，而不是单独的div。

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

Answer 2

I think you have an issue in your body tag, it should be: 我认为您的身体标签有问题，应该是：

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

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

问题描述

2 个解决方案

解决方案1
1 2014-05-29 16:07:14

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

解决方案2
0 2014-05-29 16:06:12

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

问题描述

2 个解决方案

解决方案1 1 2014-05-29 16:07:14

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

解决方案2 0 2014-05-29 16:06:12

解决方案1
1 2014-05-29 16:07:14

解决方案2
0 2014-05-29 16:06:12