Question

I found this excellent plugin for ajax pop up for MVC called SimleModal, but am not able to get it to work. http://www.ericmmartin.com/projects/simplemodal/ is the website.

I want to use this plugin to pop up a view (in MVC) when a link is clicked on. Can any one show me the right direction here.. thank you..sample pseudo code?

Answer 1

Why not just use the built in jQuery-ui? Simply call $(‘#someDiv’).Dialog(…) to make it work. Then you can use the jQuery theme roller site as well to customize your look – and you are dealing with ‘base line’ jQuery code.

To keep the same example syntax like Darrin added above for ease of comparison see below.

Configure your widget options and download them (you can choose from a whole lot of widgets – just the dialog if youd like or others
Do this at: http://jqueryui.com/download

Make sure you reference the css file, jquery, and the jquery ui. Download the jQuery ui and put the /images folder into your /content folder as well as the css file.

Ensure you are linking in the files (I chose google for the second file – you can choose your own local if you’d like)

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" />

calling it is as simple as:

<div id="result">bipbip</div>
<script type="text/javascript">
    $(document).ready(function () {
    //initialize the dialog
        $("#result").dialog({ width: 400, resizable: false, position: 'center', title: 'My Dialog', autoOpen: false,
         buttons: { "Ok": function() { $(this).dialog("close"); } } 
         });
    });

    $(function () {
        $('#modal').click(function () {
            //load the content from this.href, then turn it into a dialog.

            $('#result').load(this.href).dialog('open');
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "Index2", null, new { id = "modal" })

For more details on the dialog see: http://docs.jquery.com/UI/Dialog