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

我想使用jQuery UI插件http://learn.jquery.com/jquery-ui/getting-started/所以我有我需要下载的所有东西。我已经把这些文件放在了他们需要的地方，并将它们包含在<head>中，就像我应该做的那样 - 在那里没有任何问题。但接下来，由于我完全没有意识，我有点卡住了。不确定如何使用jQuery UI对话框模式弹出

它说：

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

JS：

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

我想使用的对话模式窗口弹出，在它的形式，他们已经得到了作为演示。 http://jqueryui.com/demos/dialog/#modal-form。当有人点击图像时，表单将弹出。据我所知（我是一个JavaScript初学者），我需要在包含表单的页面上创建一个隐藏的div。我需要以某种方式附加到JavaScript，然后当用户单击图像时需要调用它。

我不知道这是对还是错。如果是对的，我不知道该怎么做。任何人都看中了我超速了一些方向:)

来源

2011-09-08 sammy sausage

沿着我想你想是这样的：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(); 
    });       
});

来源

2011-09-08 22:51:37 expertCode

这并不能解释如何使用该特定的插件。或者至少如果是这样，我不理解它。这个插件的javascript比你所拥有的更大。当然不可能是同一件事？ –

要正常工作，您需要在项目中包含最新版本的jQuery和jQuery UI。之后，您可以使用该小工具，例如对话框（）。要知道这些库的工作原理，你有很好的文档解释所有的东西： - [jQuery Documentation]（http://docs.jquery.com/Main_Page） - [jQuery UI Documentation]（http：//docs.jquery .com/UI）这是你想知道的吗？ – expertCode

所以，你隐藏的div可以有一个类.noshow

你可以添加到你的CSS：

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

然后，在你的js，

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

应该工作...

来源

2011-09-08 22:52:09

你好，谢谢你的回应，但虽然这确实产生了一个我想要的东西，但并没有具体解释如何使用插件。 –

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

回答

相关问题