1

我一直在为我的网站设计一个模式窗口。我无法让 ajax 以我想要的方式工作，所以我这样创建它：

模态窗口和背景只是我在页面加载时隐藏的 asp 面板控件（执行此操作的代码，我同意是 arb，但我还没有设法改进它）

以下是模态的 html（预渲染）：

<asp:Panel runat="server" ID="pnlModalbg" CssClass="modalbg"> </asp:Panel>
<asp:Panel runat="server" ID="pnlModal" CssClass="modal">
    <!-- Modal content goes here -->
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- End Modal content -->

    <!-- Close button -->
    <div class="centeralign"><asp:Button runat="server" ID="btnCloseModal" Text="Close" CssClass="button" /></div>
    <!-- End close button -->
</asp:Panel>

非常简单。现在这是我用来显示/隐藏它的代码。上面的面板应在页面加载时隐藏，然后应显示在 GridView.RowCommand 事件上。这很好用，但我怀疑这是最好的方法：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then

        pnlModal.Style(HtmlTextWriterStyle.Display) = "none"
        pnlModalbg.Style(HtmlTextWriterStyle.Display) = "none"
    End If

End Sub

Protected Sub gvAppointments_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles gvAppointments.RowCommand

    If e.CommandName = "ViewAppt" Then

        lblAppointmentId.Text = e.CommandArgument

        GetDetails()

        pnlModal.Style(HtmlTextWriterStyle.Display) = "block"

        pnlModalbg.Style(HtmlTextWriterStyle.Display) = "block"

    End If
End Sub

Protected Sub btnCloseModal_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCloseModal.Click

    pnlModalbg.Style(HtmlTextWriterStyle.Display) = "none"
    pnlModal.Style(HtmlTextWriterStyle.Display) = "none"

End Sub

现在这是真正的问题。的CSS。无论屏幕分辨率如何，这应该将模态窗口定位在距浏览器窗口顶部边缘 150px 和距浏览器窗口边缘左侧 450px 的位置。它没有。我测试过的每个屏幕上的水平定位都是不同的。

理想情况下，我想在类中使用边距（最好margin: 150px auto;是 ）.modal进行定位，但如果没有绝对定位，它总是与页面内容的其余部分一起显示。此外，.modalbg面板出现在模式窗口本身的上方。应用.modal {z-index: 9999;}和.modalbg {z-index: -1;}帮助，但是 modalbg 似乎仍然位于页面上的其他元素之后，并且更改它们的 z-index 值并不能纠正这一点。

.modal
{
    border: 2px solid #014073;
    border-radius: 5px;
    left: 450px;
    top: 150px;
    display: none;
    position: absolute;
    background: #fff;
    padding: 10px;
}

.modalbg
{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -moz-opacity:.30;
    filter:alpha(opacity=30);
    opacity:.30;
    display: none;
}

我不介意必须更改服务器代码中的显示 css，但是对于 css 问题的任何帮助将不胜感激！

4

1 回答 1

2

因此，在改进了我的模态并看到我对这个问题没有任何回应之后，这是我当前的模态窗口模板：

的HTML

<a href="#" class="showModal">Show Modal</a>

<div class="modalbg" onclick="hideModal();">
</div>
<div class="modal">
    <!-- Content goes here -->

    <a href="#" class="hideModal">Hide Modal</a>
</div>

这很简单，实际上只有几个 div。作为模态背景的一个是空的，另一个是实际的模态窗口，可以随意设置样式。还需要一个链接或用户可以单击以显示模式的东西。

我还在模态背景中添加了一个 onclick，这样如果它被点击，它将隐藏模态并让用户继续使用站点的其余部分。我看过一些网站，这是不可能的，而且确实非常具有侵入性。

CSS

.modal
{
    box-shadow: 0 0 10px 2px #a1a1a1;
    border-radius: 5px;
    margin: 0 auto;
    display: none;
    position: absolute;
    background: #c1c1c1;
    padding: 10px;
}

.modalbg
{
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    -moz-opacity:.30;
    filter:alpha(opacity=30);
    opacity:.30;
    display: none;
    z-index: 0;
}

由于问题是关于css的，这就是我所拥有的。基本上，模态背景应该从左上角到右下角跨越整个浏览器窗口。模态框位于0 auto页边距以使其在页面上正确居中（可以根据自己的喜好调整上/下边距）。当我问这个问题时，这是我遇到问题的地方，但这不应该是这个模板的问题。

这是让一切正常工作的 JQuery

var modalbg = $(".modalbg");
var modal = $(".modal");

$(".showModal").click(function() {
    modalbg.fadeIn(500);
    modal.fadeIn(500);
});

$(".hideModal").click(function() {
    hideModal();
});

function hideModal() {
    // It's important here to blank out any form fields you may have on the modal
    // use $("#field_name").text = "";

    modalbg.fadeOut(500);
    modal.fadeOut(500);
}

大多数情况下，JQuery 只是促进模式的显示/隐藏。我确信可能有一种方法可以改进这一点，但它按原样工作得很好。

于 2012-12-05T07:05:12.830 回答