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

查看:182
本文介绍了如何使用一个单一的模式在我的web应用程序,并避免在每一页上但却难免重复HTML?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我发现自己把同一格的每一页上作为一个模式对话框使用。转念一想,我只想把一个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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆