By J Caisip

Share this page

Here is an example of the modal display used in the jonisium website:

CSS

====

/*Modal demo*/

#simplemodal-overlay
{
    background-color: #000;
    cursor: wait;
}

#simplemodal-container
{
    min-height: 100px;
    min-width: 300px;
    background-color: #fff;
    border: 3px solid #ccc;
    padding: 10px;
    color: #666666;
}

#simplemodal-container a.modalCloseImg
{
    /*background-position: url(/content/images/Site/XMark.gif) no-repeat;
    background: url(/content/images/Site/XMark.gif) no-repeat;*/
    width: 25px;
    height: 29px;
    display: inline;
    z-index: 3200;
    position: absolute;
    top: 1px;
    right: -3px;
    cursor: pointer;
    background-color: #FF0000;
}

Site.Master

=========

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="/Scripts/MicrosoftMvcAjax.debug.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.simplemodal-1.3.js"></script>
    <script type="text/javascript">
        function ShowModalDiv() {
            $('#modal-div').modal();
        };
    </script>

Controller

========

    Function ModalDemo() As ActionResult
        Return View()
    End Function
    Function ModalAction() As String
        Return "Got it!"
    End Function

ACTION

======

    <fieldset>
        <legend>Modal Demo</legend>
        <%  Using Ajax.BeginForm("ModalAction", New With {.controller = "Home"}, New AjaxOptions With {.UpdateTargetId = "modal-div", .OnSuccess = "ShowModalDiv"})%>
        <input type="submit" name="submit" value="Display Modal" />
        <%End Using%>
        <div id="modal-div" style="display: none">
        </div>
    </fieldset>

Enjoy MVC coding

Jonisium Experiment is exploring what you can imagine on the internet using ASP.NET MVC.