Question

I’ve been working on a modal window for my site. I can’t get the ajax one to work the way I want so I created it like this:

The modal window and background are just asp Panel controls that I’m hiding on page load (the code to do this, I agree is arb, but I haven’t managed to improve on it)

The following is the html (pre-render) for the modal:

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

Very simple. Now here’s the code that I’m using to show/hide it. The Panels above should be hidden on page load, and should then display on the GridView.RowCommand event. This works fine, but I doubt it’s the best way to do this:

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

Now here’s the real problem. The CSS. This should position the modal window 150px from the top edge of the browser window and 450px from the left of the edge of the browser window regardless of screen resolution. It doesn’t. The horizontal positioning is different on every screen that I’ve test on.

Ideally, I’d like to use margins (preferably margin: 150px auto;) in the .modal class for positioning, but without the absolute positioning, it always displays packed in with the rest of the page content. Also, the .modalbg Panel appears over the modal window itself. Applying .modal {z-index: 9999;} and .modalbg {z-index: -1;} helps, but then the modalbg still appears to be behind other elements on the page and changing their z-index values doesn’t correct this.

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

I don’t mind having to change the display css in the server code, but any help with the css problems will be greatly appreciated!

Answer 1

So after refining my modal and seeing as I’ve had no response to this question, here’s my current template for modal windows:

The 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>

It’s very simple, just a couple of divs really. The one serving as the modal background is empty and the other one is the actual modal window which can be styled however you like. Also needed is a link or something that the user can click which will display the modal.

I also added an onclick to the modal background so that if it ever gets clicked, it’ll hide the modal and let the user continue to use the rest of the site. I’ve seen some websites where this isn’t possible and it is quite intrusive really.

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

As the question was about the css, here’s what I’ve got. basically, the modal background should span the entire browser window from the top left corner to bottom right. The modal is positioned at a 0 auto margin to center it correctly on the page (the top/bottom margin can be adjusted to your liking). This is where I was having problems when I asked the question but it shouldn’t be an issue with this template.

And here’s the JQuery to make it all work

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

Mostly the JQuery just facilitates the display/hide of the modal. I’m sure there’s probably a way to improve on this, but it works perfectly fine as-is.