HTML 模态最大宽度为 500 像素

Question

我有这个 html 代码：

<!doctype html>
<html>
<head>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/index.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>


    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

    <script src="/static/index.js"></script>
    
</head>
<body>

<div class="container-fluid" id="content">
    <div id="suggestion_modal_content" class="modal">
        <div>

        </div>
         <a href="#" rel="modal:close">Close</a>
</div>

</body>
</html>

现在，这是模式的样子（在我添加文本之后）：

当我使用 google 开发工具时，这是模式元素 css 值：

当我删除 max-width:500px 行时，页面看起来像我需要的（全屏）。

我尝试添加：

.modal{
    max-width: none;
}

但它不起作用。我做错了什么？

Answer 1

jQuery 模态 CSS 被包含在您的自定义 CSS 之后。因为两个样式表使用具有相同特性的相同选择器 (.modal)，所以级联中最后一个（在本例中，jQuery Modal CSS）会覆盖另一个的样式。

您应该更改 <head> 元素中样式表的顺序，并确保您的自定义样式始终位于任何供应商样式之后。这将允许您在使用具有相同特性的选择器时覆盖 vendor CSS，而不必使用 !important.

<!-- jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- custom -->
<link rel="stylesheet" href="/static/index.css"/>
<script src="/static/index.js"></script>

HTML 模态最大宽度为 500 像素

HTML modal has 500 px max-width

html

css

bootstrap-modal