不确定如何使用jQuery UI对话框模式弹出窗口

Question

我想使用jQuery UI插件http://learn.jquery.com/jquery-ui/getting-started/，所以我已经下载了所有需要的东西。 我将文件放在需要放置的位置，并按照我的预期将它们包含在<head>中-那里都没有问题。 但是接下来，由于我完全的寂寞，我有点卡住了。

它说：

包含必要的文件后，您可以向页面添加一些jQuery小部件。 例如，要制作日期选择器小部件，您将在页面上添加文本输入元素，然后调用.datepicker（）;。 在上面。 像这样： HTML： <input type="text" name="date" id="date" />

JS：

$('#date').datepicker();

我想将对话框模态窗口弹出窗口与演示一起使用在其中。 http://jqueryui.com/demos/dialog/#modal-form 。 当有人单击图像时，该表格将弹出。

据我所知（我是JavaScript的初学者），我需要在包含表单的页面上创建一个隐藏的div。 我需要以某种方式将其附加到JavaScript，然后在用户单击图像时调用它。

我不知道这是对还是错。 如果是的话，我不知道该怎么做。 任何人都想加快我的步伐以及其他方向：)

Answer 1

我认为您想要这样的东西： http : //jsfiddle.net/expertCode/gTPnz/

HTML：

<div>
    <img alt="exampleImage" src="http://www.cancercareofwnc.com/Images/topmenu_testing_0.gif">

    <div id="myDiv">
        <form id="myForm">
            <input type="text" name="date" id="date" />
            <input type="text" name="other" id="other" />
        </form>
    </div>
</div>

CSS：

div#myDiv{
    visibility:hidden;
}

JavaScript的：

$(document).ready(function(){
    $('img[alt="exampleImage"]').click(function(){
        $('#myForm').dialog();
    });                          
});

Answer 2

因此，您的隐藏div可以具有一个类.noshow

您可以添加到CSS：

`.noshow` {
  display: none !important;
}

然后，在您的js中，

$('#mylink').click(function() {
  $('#hiddenForm').removeClass('noshow').dialog({ modal: true });
});

应该管用...

不确定如何使用jQuery UI对话框模式弹出窗口

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-09-08 22:51:37

解决方案2
0 2011-09-08 22:52:09

不确定如何使用jQuery UI对话框模式弹出窗口

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-09-08 22:51:37

解决方案2 0 2011-09-08 22:52:09

解决方案1
1 已采纳 2011-09-08 22:51:37

解决方案2
0 2011-09-08 22:52:09