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

debugcn 发表于 Dev

用户3453264

网络首次启动后，我试图弹出一个窗口（关于网站页面）。我正在使用Magnific弹出式窗口-模态弹出式窗口，很难弄清楚该怎么做。当网站启动时，弹出窗口可以正常工作，然后用户单击“关于”按钮。

我感谢您提供的任何帮助。谢谢你们：）

脚本：

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

杜汗

您也可以在初始化时直接使用打开弹出窗口 .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();
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。