Question

首次启动网页时，我正尝试弹出一个弹出窗口（关于网站的页面）。我正在使用Magnific popup - 模式弹出窗口，并且很难确定如何做到这一点。弹出窗口工作正常，当网站启动时，用户点击＆＃34;关于＆＃34;按钮。

我感谢任何帮助。谢谢，伙计们:)）

脚本：

$(function () {
    $('.popup-modal').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#username',
      modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
      e.preventDefault();
      $.magnificPopup.close();
    });
});

HTML：

<div class="html-code">
      <a class="popup-modal" href="#test-modal">about</a>

      <div id="test-modal" class="mfp-hide white-popup-block">
        <p>Change the way you think about recipes. Text link interchanges with verbs and nouns of recipes.</p>
        <p><a class="popup-modal-dismiss" href="#">Close</a></p>
      </div>

的CSS：

.popup-modal{
    text-decoration: none;
    font-weight: bold;
    color:black;
    position:fixed;
    left:0;
    margin-left: 50px;
    bottom:0;
    margin-bottom: 25px;
}

#test-modal{
    background-color: white;
    padding: 30px 40px;
    text-align:left;
    max-width: 650px;
    margin:40px auto;
    position:relative;

    font-size: 15pt;
    line-height: 25pt;
}

.popup-modal-dismiss{
    text-align: right;
    font-size: 10pt;
    text-decoration: none;
}

Answer 1

您也可以使用.magnificPopup('open');

在初始化时直接打开弹出窗口

$(function () {
    $('.popup-modal').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#username',
      modal: true
    }).magnificPopup('open');

    $(document).on('click', '.popup-modal-dismiss', function (e) {
      e.preventDefault();
      $.magnificPopup.close();
    });
});

页面打开后启动弹出窗口（使用Magnific弹出窗口）

1 个答案: