如何使用JQuery打开弹出窗口？

Question

我有这样的例子：

https://jsfiddle.net/bac8qdq1/

HTML：

<a id="OpenDialog" href="#">Click here to open dialog</a> 
<div id="dialog" title="Dialog Title"> 
    <p>test</p> 
</div> 

JQuery的：

$(document).ready(function() { 
    $("#OpenDialog").click(function() { 
     $("#dialog").dialog({ 
      modal: true, 
      height: 590, 
      width: 1005 
     }); 
    }); 
}); 

我想，当链接用户点击打开，在一个新的窗口弹出内部区域。

我试过上面的代码，但不幸的是它没有工作......你能告诉我应该如何解决这个问题吗？ 我想打开窗口并包含textarea元素。

Answer 1

这是一个解决方案。哟可以尝试

$(document).ready(function() { 
      $("#OpenDialog").click(function() { 
       //$("#dialog").dialog({modal: true, height: 590, width: 1005 }); 
       var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes"); 
       var $w = $(w.document.body); 
       $w.html("<textarea></textarea>"); 
      }); 
     }); 

下面是编辑的jsfiddle https://jsfiddle.net/bac8qdq1/13/

Answer 2

要打开dialog使用open选项：

$("#OpenDialog").click(function() { 
    $(".selector").dialog("open"); 
}); 

文档：http://api.jqueryui.com/dialog/#method-open

您还可以使用autoOpen选项在初始化打开对话框：

$("#OpenDialog").click(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     height: 590, 
     width: 1005, 
     autoOpen: true 
     // ^^^^^^^^^^^ 
    }); 
}); 

文档：http://api.jqueryui.com/dialog/#option-autoOpen

Answer 3

我有更新捣鼓你，请看一看。据工作

https://jsfiddle.net/bac8qdq1/12/

$(document).ready(function() { 
    $("#dialog").dialog({ autoOpen: false, modal: true, height: 590, width: 1005 }); 

      $("#OpenDialog").click(function() { 
       $("#dialog").dialog('open'); 
      }); 
     }); 

Answer 4

甚至without JavaScript。只是为了好玩。

#dialog{ 
    display: none; 
} 
#dialog:target{ 
    display: block; 
} 
#close{ 
    position: fixed; 
    opacity: 0; 
} 
#close:target + #dialog{ 
    display: none; 
}