Question

我正在使用：

FireFox 4.0
jquery 1.5.1
jquery UI 1.8.13
HTMLBox 4.0.3

我的javascript如下所示：

$(document).ready(function() {
var box;
box = $("#EmailContent").htmlbox({
    about: false,
    idir: "/pics/",
    toolbars: [
     ["cut", "copy", "paste", "separator", "bold", "italic", "underline", "strike", "sub", "sup", "separator",
     "left", "center", "right", "justify", "separator", "ol", "ul", "indent", "outdent", "separator", "link", "unlink", "image"],
     ["code", "removeformat", "striptags", "separator", "quote", "paragraph", "hr"]]
});

$(":button").not("#save").click(function() {
    var myClass = $(this).attr("class");
    box.set_text($("div.body." + myClass).html());

    //change the title of our modal dialog
    $("#edit").dialog("option", "title", ("Edit "));

    var my_buttons = {};
    my_buttons["Save"] = function() {
        saveInventory();
    };

    my_buttons["Cancel"] = function() {
        $('#edit').dialog("close");
    };        

    $('#edit').dialog({
        buttons: my_buttons
    });

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

});

$('#edit').dialog({
    autoOpen: false,
    height: 450,
    width: 700,
    modal: true
}); //end dialog box    
});

在我添加所有jQuery对话框之前（基本上我改变模态标题的所有内容），上面的代码生成一个HTMLBox，它可以正常工作......我可以与HTMLBox进行交互。

但是，在添加对话框代码时，HTMLBox会中断。 HTML框的textarea不允许焦点。

在比较使用Firebug的工作和非工作时，我发现了一个区别。工作副本在HTMLBox生成的标记中包含以下内容：

<link rel="stylesheet" href="data:text/css,body%7Bmargin%3A3px%3Bfont-family%3Averdana%3Bfont-size%3A11px%3B%7Dp%7Bmargin%3A0px%3B%7Dbody%7Bbackground%3Awhite%3B%7Dbody%7Bbackground-image%3Aurl%28/pics/logo.gif%29%3Bbackground-position%3Atop%20right%3Bbackground-repeat%3Ano-repeat%3B%7D">

任何人都知道如何解决这个问题？

此处的搜索在textarea和模态对话框中出现了潜在的Firefox问题：
FireFox textarea issue in modal dialog

Answer 1

经过一番研究和实验，我解决了我的问题。

显然，Firefox 4.0在jQuery UI对话框中与iFrame不相称。

修复方法是移动HtmlBox初始化的位置和方式。而不是上述内容，我将其更改为以下内容：

$(document).ready(function() {
var box;
var myClass;


$(":button").not("#save").click(function() {
    myClass = $(this).attr("class");
    $("#class").html(myClass);
    $("#EmailTo").val($("div.to." + myClass).html());
    $("#EmailSubject").val($("div.subject." + myClass).html());

    //change the title of our modal dialog
    $("#edit").dialog("option", "title", ("Edit "));

    var my_buttons = {};
    my_buttons["Save"] = function() {
        if saveEmail() {
            $('#edit').dialog("close");
        }
    };

    my_buttons["Cancel"] = function() {
        $('#edit').dialog("close");
    };

    $('#edit').dialog({
        buttons: my_buttons
    });

    $("#edit").dialog("open");
});

$('#edit').dialog({
    autoOpen: false,
    height: 450,
    width: 700,
    modal: true,
    open: function(event, ui) {
        if (box == null) {
            box = $("#EmailContent").htmlbox({
                about: false,
                idir: "/pics/",
                css: "body{font-family:verada;font-size:11px;}",
                toolbars: [
                     ["cut", "copy", "paste", "separator", "bold", "italic", "underline", "strike", "sub", "sup", "separator",
                     "left", "center", "right", "justify", "separator", "ol", "ul", "indent", "outdent", "separator", "link", "unlink", "image"],
                     ["code", "removeformat", "striptags", "separator", "quote", "paragraph", "hr"]]
            });
        }

        box.set_text($("div.body." + myClass).html());
    }
}); //end dialog box

出于某种原因，将HtmlBox的初始化代码放在jQuery UI Dialog的open事件中，它可以工作。但是，我发现我需要检查box变量是否为null，否则我会得到很多编辑。

要为iFrame插件进行一般性扩展，我相信应该将基于iFrame的插件的初始化放入jQuery UI对话框的open事件中

HTMLBox 4.0.3：HTMLBox和jquery模式对话框的问题。需要帮忙

1 个答案: