Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I am assuming you are talking about the SimpleModel jquery plugin found at <a href="http://www.ericmmartin.com/projects/simplemodal/" rel="nofollow noreferrer">http://www.ericmmartin.com/projects/simplemodal/</a> and that you've already got a basic ASP.NET MVC application setup.</p> <p>I am going to run through how you can get the <strong>Basic Modal Dialog</strong> example working.</p> <p><strong>Get the plugin files into your ASP.NET MVC application</strong></p> <ol> <li>Download the example from the demos link on the link above and unzip it.</li> <li>Copy the basic.css and basic_ie.css files into the Content folder of your ASP.NET MVC application.</li> <li>Also copy the img folder into the Content folder of your ASP.NET MVC application.</li> <li>Lastly, copy the javascript files in js folder into the Scripts folder of your ASP.NET MVC application.</li> </ol> <p><strong>Reference the stylesheet and javascript files in your application</strong></p> <p>Open your Site.Master file under Views\Shared and paste the code below before the <code>&lt;/head&gt;</code> tag</p> <pre><code>&lt;link type='text/css' href='../../Content/basic.css' rel='stylesheet' media='screen' /&gt; &lt;!-- IE 6 "fixes" --&gt; &lt;!--[if lt IE 7]&gt; &lt;link type='text/css' href='../../Content/basic_ie.css' rel='stylesheet' media='screen' /&gt; &lt;![endif]--&gt; &lt;script type='text/javascript' src='../../Scripts/jquery.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='../../Scripts/jquery.simplemodal.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='../../Scripts/basic.js'&gt;&lt;/script&gt; </code></pre> <p><strong>Finally, call the dialog in your view</strong></p> <p>For example in Index.aspx, you can paste the following code:</p> <pre><code>&lt;div id='basic-modal'&gt;&lt;h2&gt;Basic Modal Dialog&lt;/h2&gt; &lt;p&gt;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.&lt;/p&gt; &lt;input type='button' name='basic' value='Demo' class='basic demo'/&gt; or &lt;a href='#' class='basic'&gt;Demo&lt;/a&gt; &lt;/div&gt; &lt;div id="basic-modal-content"&gt; &lt;h3&gt;Basic Modal Dialog&lt;/h3&gt; &lt;p&gt;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).&lt;/p&gt; &lt;p&gt;Examples:&lt;/p&gt; &lt;p&gt;&lt;code&gt;$('#basicModalContent').modal(); // jQuery object; this demo&lt;/code&gt;&lt;/p&gt; &lt;p&gt;&lt;code&gt;$.modal(document.getElementById('basicModalContent')); // DOM&lt;/code&gt;&lt;/p&gt; &lt;p&gt;&lt;code&gt;$.modal('&amp;lt;p&amp;gt;&amp;lt;b&amp;gt;HTML&amp;lt;/b&amp;gt; elements&amp;lt;/p&amp;gt;'); // HTML&lt;/code&gt;&lt;/p&gt; &lt;p&gt;&lt;a href='http://www.ericmmartin.com/projects/simplemodal/'&gt;More details...&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Hope that helps.</p> <p>Matrich</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload