Question

我刚看到github上的jQuery Popup Overlay演示，Here

下载了query.popupoverlay.js文件

并将其添加到我的项目中。并将其添加到我的主页只是为了确保它正常工作：

按钮：

  <a class="initialism basic_open btn btn-success" href="#basic">Basic</a>

容器：

    <!-- Basic -->

<div id="basic" class="well" style="max-width:44em;">
    <h4>Basic example</h4>
    <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p>
    <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
    <button class="basic_close fade_open btn btn-default">Next example</button>
    <button class="basic_close btn btn-default">Close</button>
</div>

<script>
    $(document).ready(function () {
        $.fn.popup.defaults.pagecontainer = '.container';
        $('#my_popup').popup();

    });

    $(document).ready(function () {
        $('#basic').popup();
    });
</script>



    </div>

顺便说一句，我使用谷歌浏览器。

Answer 1

在插件之前，您应该在脚本中添加jquery插件。未指定的弹出框仅仅是由于缺少css，我没有添加

＆＃13;

$(document).ready(function () {
    $('#basic').popup();
    $('#basic1').popup();
    $('#basic2').popup();
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>


<a class="initialism basic_open btn btn-success" href="#basic">Basic</a>
<div id="basic" class="well" style="max-width:44em;">
    <h4>Basic example</h4>
    <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p>
    <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
    <button class="basic_close fade_open btn btn-default">Next example</button>
    <button class="basic_close btn btn-default">Close</button>
</div>



<a class="initialism basic1_open btn btn-success" href="#basic1">Basic1</a>
<div id="basic1" class="well" style="max-width:44em;">
    <h4>Basic 1 example</h4>
    <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p>
    <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
    <button class="basic1_close fade_open btn btn-default">Next example</button>
    <button class="basic1_close btn btn-default">Close</button>
</div>

<a class="initialism basic2_open btn btn-success" href="#basic2">Basic2</a>
<div id="basic2" class="well" style="max-width:44em;">
    <h4>Basic 2 example</h4>
    <p>Try to change the width and height of browser window, or to rotate your device, and also try to navigate with the <kbd>Tab</kbd> key.</p>
    <p>You can close the dialog by pressing the <kbd>Esc</kbd> key, or by clicking on the background outside the content area, or by clicking on the Close button.</p>
    <button class="basic2_close fade_open btn btn-default">Next example</button>
    <button class="basic2_close btn btn-default">Close</button>
</div>

＆＃13;

Jquery弹出窗口覆盖不起作用

1 个答案: