Question

我一直在为我的网站制作一个模态窗口。我无法让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问题的任何帮助将不胜感激！

Answer 1

所以在完善我的模态并看到我对此问题没有回应之后，这是我目前的模态窗口模板：

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能够全部工作的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只是简化了模式的显示/隐藏。我确信可能有一种方法可以改进，但它的工作原理非常好。

CSS修复自己动手模态

1 个答案: