Modal form in ASP.NET using jQuery

Question

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!

Darren · Accepted Answer · 2013-09-03 13:59:24Z

11

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" />

edited Sep 3, 2013 at 13:59

answered Sep 3, 2013 at 8:43

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ebooyens Over a year ago

Thanks for this @darren-davies, sorry for being thick but where would you place the Javascript? In the Head content section of the aspx page I'm working on I added your code inside a <script> tag and I get "Microsoft JScript runtime error: '$' is undefined" when it hits the first line. Thanks!

Darren Over a year ago

@ebooyens - you need to include the jQuery reference in the <head> section yes. I'll update my answer to include the CDN version of jQuery. Remember you need jQuery UI for the Dialog. And we were all new once so not to worry :)

Dave Becker Over a year ago

@DarrenDavies - +1 one of the best answers I've seen posted on SO. Wish everyone was so elaborate in their examples and explainations (including me!)

Remy Over a year ago

Nice comprehensive answer @DarrenDavies, you even threw in a jsfiddle :)

ebooyens Over a year ago

I think your answer is all good but I'm afraid I can't get it to work in my ASP.NET project. There must be other things in the project causing problems - I now don't get any errors but nothing happens when I click the button. If I set autoOpen to true it shows up but looks quite strange, no borders for example, and the close link appears and does hide it when clicked. So I'll play around, don't expect you to try and sort this under this question. Thanks again!

|

Collectives™ on Stack Overflow

Modal form in ASP.NET using jQuery

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related