如何使用一个单一的模式在我的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屋!