I'm relatively new to ASP.NET development, have so far managed to keep things simple but I now have a little more complex of a requirement and so far not getting much joy.
Essentially I'd like to have a modal form pop up when a button is clicked to add a new user, so I've found this on the jQuery site which I think is the sort of thing I'm looking for but I'm really struggling to figure out what the appropriate way is to add this to an ASP.NET project / page.
Any advice would be highly appreciated thanks!
You need to include a reference to jQuery
and jQuery UI
.
You then need to make a container for your dialog, such as:
<div id="dialog">
<p>
Your content here
</p>
</div>
You then need to create the dialog, i.e. when the DOM
loads:
$(document).ready(function() {
$("#dialog").dialog({ autoOpen: false, height: 200, width: 200 });
});
Then to open your dialog with a button, you can add a simple HTML
button and attach that via jQuery.
<input type="button" ID="btnDialog" value="Click here to open the dialog" />
Then to attach to jQuery
:
$("#btnDialog").click(function() {
$("#dialog").dialog("open");
});
JS Fiddle: http://jsfiddle.net/VtZYD/
Ensure jQuery
is loaded as well as jQuery UI
This should be placed in your <head>
section:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You can also include the CSS
files using a link
tag:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With