如何使用一个单一的模式在我的web应用程序，并避免在每一页上但却难免重复HTML？ [英] How can I use a single modal across my web application and avoid repetative html on every page?

问题描述

我发现自己把同一格的每一页上作为一个模式对话框使用。转念一想，我只想把一个DIV中的Site.Master页，并调用它。这工作好 - 直到我开始使用Ajax和部分页面更新。我怎样才能避免把对话的HTML在每一个更新面板？

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?

推荐答案

我花了几天将可能被共享的应用程序范围或应用程序作为一个DLL之间的一个单一来源的模态函数。承蒙社会各界的点点滴滴沿途拾起。这是我的完整的解决方案。希望这可以帮助别人。

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.

该解决方案采用非JavaScript。要关闭模式，它使用：目标CSS伪类

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

在放的Site.Master一个占位符：

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

和这里使用CSS：目标隐藏模式

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";
}

调用示例：

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

请注意缺少的第二个变种。这是因为它是一个边后卫后，将默认为母版页上的占位符。如果我们从一个更新面板打电话，那么我们就需要像这样的更新面板内的容器的id：

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")

这篇关于如何使用一个单一的模式在我的web应用程序，并避免在每一页上但却难免重复HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！