Question

我制作了一个自定义的jQuery模式/弹出窗口，并想将它添加到我的wordpress网站。

HTML

<div id="dialogForm">
  <form id="myform" method="post">
    <br><br><br>
    <p id=title name=title><b>VERLOF</b></p>
    <br><br>
    <p id=eerste name=eerste>We zijn gesloten op <b>5 mei.</b></p>
    <p id=tweede name=tweede>Voor dringende interventies, gelieve te <u>mailen <br>of een bericht in te spreken</u>.</p><br>
    <br/>
    <a href="#"><button id=contact name=contact type="submit">Contacteer ons</button></a>
    <button id=close name=close type="submit">Sluiten</button>
  </form>
</div>

的jQuery

jQuery(document).ready(function($) {

  $("#dialogForm").dialog({
    modal: true,
    width: 730,
    height: 490,
    title: "VERLOF",
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 800
    }
  });

  $("#dialogForm").dialog("open");

  $(".ui-dialog-titlebar").hide();

  $('#close').click(function(e) {
    e.preventDefault();
    $('#dialogForm').dialog('close');
  });
});

代码示例： JSfiddle

我发现了许多不同的方法，但它们似乎都没有... 有人能指出我正确的方向吗？

加载网站时应显示弹出窗口。

Answer 1

<强> JavaScript的：

将您的JavaScript保存为.js文件，例如my-dialog.js
将其放入活动主题的/js/文件夹中（如果它不存在则创建它）

CSS：您有两种选择：

将其保存为与上面的JavaScript文件类似（但将其放在/css/文件夹中，并将其命名为my-dialog.css。
将CSS粘贴到外观＆gt; 定制工具＆gt;您网站的其他CSS 部分。

加载这些文件：

使用以下代码将其排入functions.php文件中，并在wp_enqueue_scripts()上阅读

function boeckske_enqueue_scripts(){
    wp_enqueue_script( 'my-dialog', get_stylesheet_directory_uri() .'/js/my-dialog.js', array( 'jquery' ), null, true );

    // If you saved your CSS as a file instead of using the Customizer:
    wp_enqueue_style( 'my-dialog', get_stylesheet_directory_uri() .'/css/my-dialog.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'boeckske_enqueue_scripts' );

现在您的JavaScript和样式都在网站中，您需要将HTML放在那里，如何操作可能会有所不同。最广泛的＆＃34;广谱＆＃34;方法是通过functions.php将其放在网站的页脚中，如下所示：

function boeckske_dialog_html(){ ?>
    <!-- Paste your Dialog HTML here -->
<?php }
add_action( 'wp_footer', 'boeckske_dialog_html' );

那会让你开始。如果您只想在主页上使用，则需要使用is_front_page()或is_home()来包装队列和/或HTML - 或者如果您只希望它显示一次必须设置cookie或类似的东西，但这超出了这个问题的范围。

由于它出现在您的网站下方，您应该考虑将其包装在另一个元素中并向该元素添加一些CSS，如下所示：

HTML

<div id="dialog-container">
    <div id="dialogForm">
        ...
    </div>
</div>

CSS：

#dialog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

您可能需要稍微尝试一下，但我们的想法是让它独立于网站的其他部分。

将自定义jQuery（模态弹出窗口）添加到wordpress

1 个答案: