Question

我有这个用html，css和jquery构建的弹出窗口，看起来有点小。当我在1920x1080分辨率的屏幕上进行测试时，它的宽度，高度和一切都很好。但是，只要我使用相同或其他网络浏览器获得较小的分辨率或更大的分辨率，模态就会下降。按钮在盒子外面，模态看起来更小等我应该如何解决这个问题？（我已经使用％而不是px作为我的宽度和高度，如下所示。）

HTML（ASPX）：

<div id="myModal" class="modal">
    <div class="modal-content">
        <h3 class="modalHdr">
            <asp:Label runat="server" Text="TRNSLTRemove Selected Visitor" />
        </h3>
        <p>
            <asp:Label runat="server" Text="TRNSLTConfirmRemoveVisitor"></asp:Label>
            "<%# Eval("VisitorFirstName") %> <%# Eval("VisitorSurName") %>"
        </p>
        <asp:Button ToolTip="TRNSLTNo" CommandName="noBtn" CommandArgument='<%# Eval("VisitorID") %>' ID="ButtonNo" runat="server" Text="TRNSLTNo" CssClass="popupConfirm" />
        <asp:Button ToolTip="TRNSLTYes" CommandName="yesBtn" CommandArgument='<%# Eval("VisitorID") %>' ID="ButtonYes" runat="server" Text="TRNSLTYes" CssClass="popupConfirm" />
    </div>
</div>

CSS

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    font-size: 13px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

    .modal-content {
        background-color: #fefefe;
        margin: auto;
        margin-top: 200px;
        padding: 20px;
        border: 2px solid cornflowerblue;
        width: 27%;
        height: 18.5%;
    }

    .modalHdr {
        margin-left: -1px;
        font-size: 20px;
    }

    .popupConfirm {
        border: 1px #aaa;
        padding: 10px 82px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 13px;
        margin: 20% 2px;
        cursor: pointer;
        background: lightgrey;
        color: black;
    }

JavaScript（jQuery）

function OpenPopup($this) {
    if ($($this).attr("disabled") === "disabled") {
        return false;
    }
    var module = $($this).parent().find("#myModal");
    module.show();
    window.onclick = function (event) {
        if (event.target === module) {
            module.hide();
        }
    };

    return false;
}

jQuery.fn.center = function (parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "fixed",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    });
    return this;
}

$(window).resize(function () {
    $("#myModal").center();
});

所有分辨率asp net的响应式jquery弹出窗口

0 个答案: