Question

我想使用jQuery UI插件http://learn.jquery.com/jquery-ui/getting-started/，所以我得到了我需要下载的所有内容。我把文件放在他们需要的位置，并将它们包含在<head>中，就像我应该的那样 - 所有这些都没有问题。但是接下来我因为我的完全无声而陷入困境。

它说：

一旦包含了必要的文件，就可以在页面中添加一些jQuery小部件。例如，要创建一个datepicker小部件，您将向页面添加一个文本输入元素，然后调用.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 个答案: