JQuery SimpleModel Plugin and MVC

Question

Has anyone ever been successful at getting the SimpleModel jquery pluggin to work in asp.net mvc? If so how did you implement it, I can't seem to get the dialog to even display.

Answer 1

I am assuming you are talking about the SimpleModel jquery plugin found at http://www.ericmmartin.com/projects/simplemodal/ and that you've already got a basic ASP.NET MVC application setup.

I am going to run through how you can get the Basic Modal Dialog example working.

Get the plugin files into your ASP.NET MVC application

1. Download the example from the demos link on the link above and unzip it.
2. Copy the basic.css and basic_ie.css files into the Content folder of your ASP.NET MVC application.
3. Also copy the img folder into the Content folder of your ASP.NET MVC application.
4. Lastly, copy the javascript files in js folder into the Scripts folder of your ASP.NET MVC application.

Reference the stylesheet and javascript files in your application

Open your Site.Master file under Views\Shared and paste the code below before the </head> tag

<link type='text/css' href='../../Content/basic.css' rel='stylesheet' media='screen' />
<!-- IE 6 "fixes" -->
<!--[if lt IE 7]>
<link type='text/css' href='../../Content/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->

<script type='text/javascript' src='../../Scripts/jquery.js'></script>
<script type='text/javascript' src='../../Scripts/jquery.simplemodal.js'></script>
<script type='text/javascript' src='../../Scripts/basic.js'></script>

Finally, call the dialog in your view

For example in Index.aspx, you can paste the following code:

<div id='basic-modal'><h2>Basic Modal Dialog</h2>
<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic demo'/> or <a href='#' class='basic'>Demo</a>
</div>

<div id="basic-modal-content">
        <h3>Basic Modal Dialog</h3>
        <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
        <p>Examples:</p>
        <p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
        <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
        <p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>

        <p><a href='http://www.ericmmartin.com/projects/simplemodal/'&gt;More details...</a></p>
</div>

Hope that helps.

Matrich