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

时间:2015-06-16 14:01:39

标签: jquery html css jquery-ui jquery-ui-dialog

我有这个样本:

https://jsfiddle.net/bac8qdq1/

HTML:

$(document).ready(function () {

    $('#btnSave').click(function () {
        alert('click');

    });
});

JQuery的:

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

我希望当用户点击要打开的链接时,会弹出一个带有文本区域的新窗口。

我尝试了上面的代码,但遗憾的是它没有用...你能告诉我应该如何解决这个问题吗? 我希望窗口打开并包含textarea元素。

4 个答案:

答案 0 :(得分:5)

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

 $(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/

答案 1 :(得分: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');
            });
        });

答案 2 :(得分:1)

要打开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

答案 3 :(得分:1)

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

class W extends Worker {
    public function run(){}
}
class S extends Stackable {
    public $id;
    public function run() {
        $this->id = uniqid();
    }
    public function __destruct () {
        // $this->id will be null here when the main thread destroys its copy of this
        if ($this->id === null) {
            echo "nullified stackable destroyed\n";
        } else {
            echo "stackable {$this->id} destroyed\n";
        }
    }
}

$pool = new Pool(3, W::class);
$i = 0;
while ($i++ < 10) {
    $pool->submit(new S());
}
sleep(1); // to let threads finish

$pool->collect(function (S $s) {
    echo "collected stackable {$s->id}\n";
    return true;
});
$pool->shutdown();
echo "script exit - here come the destructions of all the accumulated stackables\n";