Unsure how to use jQuery UI dialog modal popup
I want to use the jQuery UI plugin http://learn.jquery.com/jquery-ui/getting-started/ so I've got everything I need downloaded. I've put the files where they need to be and included them in the <head> like I'm supposed to - all no problems there. But next I get a little stuck due to my utter noobieness.
It says:
Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call .datepicker(); on it. Like this: HTML:
<input type="text" name="date" id="date" />JS:
$('#date').datepicker();
I want to use the dialog modal window popup with a form in it they've got as a demo. http://jqueryui.com/demos/dialog/#modal-form. The form will popup when someone clicks an image.
As far as I can make out (I'm a beginner with JavaScript) I need to make a hidden div on my page which contains the form. I need to attach it somehow to J开发者_运维百科avaScript then need to call it when the user clicks the image.
I have no idea if that's right or wrong. And if it's right I dunno how to do it. Anyone fancy speeding me along with some directions :)
I think you want something like this: 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();
});
});
So, your hidden div could have a class .noshow
You could add to your css:
`.noshow` {
display: none !important;
}
Then, in your js,
$('#mylink').click(function() {
$('#hiddenForm').removeClass('noshow').dialog({ modal: true });
});
Should work...
加载中,请稍侯......
精彩评论