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

我用html、css和jquery构建了这个弹出窗口，看起来有点不对劲。当我在分辨率为1920x1080的屏幕上测试它时，它的宽度、高度和所有方面都很好。但是，只要我使用同一个或另一个web浏览器，使用更小或更大的分辨率，模式就会启动。按钮在盒子外面，模态似乎更小，等等。我应该如何解决这个问题？（我的宽度和高度已使用%而不是px，如下所示。）

HTML（ASPX）：

JavaScript（jQuery）

---

尝试为.modal内容添加最小宽度和最小高度。根据您的内容调整它们-例如最小宽度：200px；最小高度：100px；你能创建一个帖子吗

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

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

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