Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modal form in ASP.NET using jQuery

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!

like image 223
ebooyens Avatar asked Sep 03 '13 08:09

ebooyens


1 Answers

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" />
like image 131
Darren Avatar answered Oct 10 '22 07:10

Darren