Как открыть всплывающее окно с помощью 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

Вот решение. Yo может попробовать

$(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"); 
}); 

Docs: http://api.jqueryui.com/dialog/#method-open

Вы также можете использовать autoOpen опцию, чтобы открыть диалоговое окно инициализации:

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

Docs: 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; 
}