Question

我有一个网页，上面显示与他们的英语对应的泰语短语。单击英文文本旁边的图标时，将显示模式对话框并隐藏英文。我希望对话框显示一个输入框，用户将在其中输入英文文本。关闭对话框后，英语再次可见。这是代码：

jQuery(document).ready(function() {
  var englishTextId;
  var t2e_dlog =  jQuery("div#t2e_dialog").dialog({
      autoOpen: false,
      modal: true,
      position: "center",
      resizable: false,
      draggable: false,
      dialogClass: "t2e_dlog",
      height: 140,
      width: 400,
      create: function() {                                 
          jQuery(this).parents(".ui-dialog")
          .css("border", "solid black 1px")                            
          .css("background", "#FFFFE8")
          .css("border-radius", "3px")            
          .find(".ui-dialog-content")
          .css("font-family", "verdana")
          .css("font-size", "0.65em")
          .css("font-style", "normal")
          .css("color",   "#1901B2")
          .css("padding", "5px 1px")
          .find(".ui-dialog-header")
          .css("display","none");       
      }
  });

  jQuery("span.t2e_icon").on("click", function(evnt) { 
     t2e_dlog.dialog("open");
     evnt.stopPropagation();
     // obscures the selected phrase
     var elementId = evnt.target.id;
     englishTextId = ("span#t1ee" + elementId.substring(7));
     // obscures text in the page associated with the dialog box
     jQuery(englishTextId).css({"border-radius" : "3px","background" : "blue", "color" : "blue"});
   });  

    jQuery(function() {
       // removes the dialog box title bar
      jQuery( "#dialog" ).dialog();
      jQuery("#ui-dialog-title-dialog").hide();
      jQuery(".ui-dialog-titlebar").removeClass('ui-widget-header');
      // placemarker html
      var input = "<p>Please enter  the English phrase here:</p><p>hello</p>"; 
      jQuery("div#t2e_dialog").append(input); 
  }); 
    jQuery(function() {    
      jQuery("div#t2e_dialog").dialog({
       // unobscures text   
       beforeClose: function( event, ui ) {
         jQuery(englishTextId).css({"border-radius" : "3px","background" : "", "color" : ""});
       }
     });   
 });   
});

以上代码适用于指定的html地标，

<p>Please enter the English phrase here:</p>

但如果将其替换为html表单，例如

<form id="t2eForm" action="#"><input type="text" id="t2e_w" name="t2eWrite"></form>

不显示对话框。我在网上看了一下，但看不到任何真正相关的东西。任何帮助将非常感激。

Answer 1

可能您的输入变量有'和"混合，请尝试修复它：

var input = '<form id="t2eForm" action="#"><input type="text" id="t2e_w" name="t2eWrite"></form>';

演示：http://jsfiddle.net/IrvinDominin/AvaY6/

无法获取jquery ui模式对话框来显示输入表单

1 个答案: