How can I use a single modal across my web application and avoid repetative html on every page?

Question

I found myself putting the same div on every page to use as a modal dialog. I then thought that I would just put a single div in the site.master page and call it there. That works okay--until I started using ajax with partial page updates. How can I avoid putting dialog html in every update panel?

Answer 1

I spent the last couple of days putting this a single-source modal function that could be shared application-wide or between applications as a dll. Thanks to the community for bits and pieces picked up along the way. Here is my full solution. Hope this helps others.

This solution uses no javascript. To close the modal, it uses the :target css pseudo class.

In site.master put a placeholder:

<asp:PlaceHolder ID="phModalDialog" runat="server" />

Create a class file:

Public Class SiteModal

Public Enum msgLevel
    message_info = 0
    message_warning = 1
    message_error = 2
    message_success = 3
End Enum

Public Shared Sub showModalMsg(ByVal sMsg As String,
                               Optional ByVal container As Control = Nothing,
                               Optional ByVal Level As msgLevel = 0,
                               Optional ByVal sCutomHeaderTitle As String = "Information")

    ' Dialog site-wide
    ' NOTE: Call can pass custom header text if desired
    Dim sClass As String = "message_info"
    Select Case Level
        Case 0
            If String.IsNullOrEmpty(sCutomHeaderTitle) Then
                sCutomHeaderTitle = "Information"
            End If
        Case 1
            sClass = "message_warning"
            If String.IsNullOrEmpty(sCutomHeaderTitle) Then
                sCutomHeaderTitle = "Caution"
            End If
        Case 2
            sClass = "message_error"
            If String.IsNullOrEmpty(sCutomHeaderTitle) Then
                sCutomHeaderTitle = "Error"
            End If
        Case 3
            sClass = "message_success"
            If String.IsNullOrEmpty(sCutomHeaderTitle) Then
                sCutomHeaderTitle = "Confirmation"
            End If
    End Select

     Dim pnl As New Panel
    pnl.ID = "pnlGlobalModal"
    pnl.CssClass = "modal-dialog"
    Dim pnl2 As New Panel
    Dim lbtn As New HyperLink
    lbtn.ID = "lbtnModalDialogClose"
    'lbtn.NavigateUrl = "#MainContent_pnlGlobalModal" '& pnl.ClientID
    lbtn.CssClass = "modal-close-btn"
    Dim lbl As New Label
    lbl.ID = "lModalHeading"
    lbl.CssClass = "modal-header"
    lbl.Text = sCutomHeaderTitle
    Dim lbl2 As New Label
    lbl2.ID = "lModalMessage"
    lbl2.CssClass = sClass
    lbl2.Text = "<br>" & sMsg
    'Assemble
    pnl2.Controls.Add(lbl)
    pnl2.Controls.Add(lbl2)
    pnl.Controls.Add(pnl2)
    pnl2.Controls.Add(lbtn)

    If container IsNot Nothing Then
        ' Load inside update panel/container if provided (ajax)
        container.Controls.Add(pnl)
        lbtn.NavigateUrl = "#" & pnl.ClientID
    Else
        ' Load inside placeholder on Master Page  (full postback)
        Dim pageHandler = HttpContext.Current.CurrentHandler
        If TypeOf pageHandler Is System.Web.UI.Page Then
            Dim ph As PlaceHolder = DirectCast(pageHandler, System.Web.UI.Page).Master.FindControl("phModalDialog")
            If ph IsNot Nothing Then
                ph.Controls.Add(pnl)
                Dim path As String = HttpContext.Current.Request.Url.AbsolutePath
                lbtn.NavigateUrl = path & "#" & pnl.ClientID
            End If
        End If

    End If
 End Sub

End class

And here is CSS using the :target to hide the modal

.modal-dialog{
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:1;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
}

.modal-dialog:target {
   visibility:hidden;
}

.modal-dialog> div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
 }

.modal-close-btn {
    background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
    cursor:pointer;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.modal-close-btn:hover { background: #00d9ff; }

.modal-close-btn::before {
    content: "\2716";
}

Example call:

      ModalDialog.showModalMsg("test message", , ModalDialog.msgLevel.message_info, "CUSTOM HEADER")

Note the missing second var. That is because it is on a full post-back and will default to the placeholder on the master page. If we call from an update panel, then we need the id of a container within the update panel like so:

      ModalDialog.showModalMsg("test message",mypanelID , ModalDialog.msgLevel.message_info, "CUSTOM HEADER")