jquery - （慢慢地）在 WordPress 中制作弹出窗口

问题描述

..希望有人可以提供帮助。

我正在为我的 WordPress 网站创建自己的弹出窗口功能。

以下代码的许多部分都是从网上收集的，并且一切正常。

有了它，我可以在 html 页面上选择几个 <a href 帮助链接，然后在屏幕上打开一个弹出窗口，每个弹出窗口都有不同的内容。

正如我所说，它有效，但效果不佳，因为我有一个性能问题——我似乎无法确定。

主要：我实际上可以看到正在填写的包含文件，轻微的延迟仅在屏幕上显示一秒钟，但我可以看到它。

结论：有些不对劲。

也许你们中最优秀的程序员之一可以通过经验丰富的眼睛检查代码，..然后指出任何弹出的内容？- 或不！

背景：- /* [ css ] - [ js ] 是两个都在主题目录路径之外的目录，都可以正常工作。在我的 functions.php 文件中，我将 [ jquery-ui.css ] 在页脚中排入队列。经过大量的试验和错误，我现在将 [ jquery-ui-min.js ] 文件放在标题中。顺便说一句：我没有使用版本号，它们只是出于习惯。我在下面的示例中放置了 [ true - the default ]，只是为了说明区别。*/

wp_enqueue_style( 'jquery-effects', get_template_directory_uri( __FILE__ ) . '/css/jquery-ui.css' , array(),  '1.0.0',  true );
wp_enqueue_script( 'jquery-core-ui', get_template_directory_uri( __FILE__ ) . '/js/jquery-ui-min.js', array( 'jquery', 'jquery-ui-dialog' ), '1.0.0',  false );

HTML：-！>- 在我的网页上，我有一个围绕 iFrame 的 Div：用于接受文件输入。->

<div id="somediv" title="&equiv; [ POPUP ] &equiv;" style="display:none;">
    <iframe id="thedialog" width="100%" height="100%" ></iframe>
</div>

CSS:- /* 我只是使用 [jquery-ui.css] 文件中的通用 [ui-dialog] 类。*/

.ui-dialog {
    position: fixed;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    background: blue; 
}

JS:- // 这是我正在使用的 js 代码。

jQuery( document ).ready( function( $ ) 
{
    $( ".trigger" ).click( function ()
    {
        // The code below constructs a clean path to my WordPress page.
        // It is saved under a '/cuttings/' parent, and it works ..
        
        var submitUrl = document.location.origin + '/cuttings/' +  $(this).attr("href");       
        $("#thedialog").attr('src',  submitUrl );        
        $("#somediv").dialog(
        {  
            width: 500,
            height: 500,
            modal: true,
            close: function () 
            {
                $("#thedialog").attr('src', "about:blank");
            }           
        });
        return false;
    });   
});

WORDPRESS:- /* 我在 WordPress 中构建了一个完全空白的模板，如下所示。*/

<?php
/* 
Template Name: WordPress Blank
*/
if ( have_posts() ) : while ( have_posts() ) :     
        the_post();
        the_content();
     endwhile; 
else: 
    echo '<p>Nothing Found!</p>';
endif
?>

它可以工作，并且只是输出没有格式化的 WordPress 页面的内容。另外：存储在 /cuttings/ 下的 WordPress 帮助页面都是使用此模板保存的。

正如我所说：这一切都按预期工作，除了填充 iFrame 弹出窗口时略有延迟。

所以，任何人都可以看到一个问题（？？？）

标签： jquerywordpressiframepopupreadfile

jquery - （慢慢地）在 WordPress 中制作弹出窗口

问题描述

解决方案

推荐阅读