2

我正在尝试使用函数生成一个 jQuery UI 对话框。该函数由 onClick 事件触发并正在执行，但由于某种原因对话框不会显示。我敢肯定这很简单。

如果可能，我更愿意以这种方式创建对话框，因为从单独的 html 页面加载对话框会导致 chrome 出现相同的来源问题。该代码是可以离线使用的浏览器扩展的一部分，因此这种方式允许在没有相同来源限制的情况下使用。

我已经创建了一个类似的这种性质的对话框，它在标签之间附加了一个参数。我已经用当前的那个试过了，但没有奏效。

我在主页中添加了最新的 jQuery ui 和 jQuery 库。

我是 javascript 和 jQuery 的新手，但如果有人能提供一些帮助，我将不胜感激。

谢谢，

乔

function imageSelection() {

var NewDialog = $('<div id="imageSelectionDialog"> ' +

    "<ol id= \"selectable\">" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image1.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image2.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image3.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image4.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image5.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image6.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image7.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image8.jpg\"/></li>" + 
    "</ol>" +

    "<form id=\"pieceSelection\">" + 
         "<div id=\"imageInput\">" + 
             "<input type=\"text\" id=\"image\" value=\"images/stock/walkin.jpg\"" +
                 "title=\"Select an image above or Paste a URL e.g http://server.com/path/to/image.jpg\"/>" + 
         "</div>" +

         "<div id=\"radio\">" + 
             "<input type=\"radio\" id=\"radio1\" name=\"radio\" checked/>" + 
             "<label for=\"radio2\">x3</label>" + 
             "<input type=\"radio\" id=\"radio2\" name=\"radio\"/>" + 
             "<label for=\"radio3\">x4</label>" + 
             "<input type=\"radio\" id=\"radio3\" name=\"radio\"/>" + 
             "<label for=\"radio4\">x5</label>" + 
             "<input type=\"radio\" id=\"radio4\" name=\"radio\"/>" + 
             "<label for=\"radio5\">x6</label>" + 7
             "<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 
             "<label for=\"radio6\">x7</label>" +
             "<input type=\"radio\" id=\"radio6\" name=\"radio\"/>" + 
             "<label for=\"radio7\">x8</label>" + 
             "<input type=\"radio\" id=\"radio7\" name=\"radio\"/>" + 
             "<label for=\"radio8\">x9</label>" + 
        "</div>" + 
    "</form>" + 
'</div> ');


NewDialog.dialog({
    autoOpen: false,
    modal: true,
    height: 500,
    width: 500,
    title: 'Choose an image',
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        }
    }
});

return false;

}​
4

2 回答 2

2

您的字符串中似乎有意外7情况，这使此连接无效，从而导致Uncaught SyntaxError: Unexpected string.

改变这个：

"<label for=\"radio5\">x6</label>" + 7
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" +

对此：

"<label for=\"radio5\">x6</label>" +
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" +

或这个：

"<label for=\"radio5\">x6</label>" + 7 + 
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" +

此外，如果您希望对话框立即可见，您需要设置autoOpen为。true

演示- 删除7and 设置autoOpen为 true

于 2013-01-03T23:17:52.100 回答
0

您似乎没有将HTML 附加到 DOM以使其工作..''

在将其分配给 Do=ialog 之前将其附加到正文中，它应该可以工作..

var html = '<div id="imageSelectionDialog"> ' + 
            //other html  ;

$('body').append(html);

var NewDialog = $("#imageSelectionDialog");

// Code to Initialize the dialog
于 2013-01-03T23:14:02.873 回答