javascript - 打开加载外部 HTML 的模态对话框后 CSS 覆盖

Question

我的 ASP.NET MVC 元素中有一个选项卡向导，在其中一个选项卡中，我通过呈现从外部 api 检索到的 html 来打开一个模式对话框。但是，当关闭向导并转到下一个选项卡时，选项卡中的表格样式(边框颜色和粗细)将更改为模式对话框中的 html 样式。到目前为止，我尝试通过 !important 强制 td、th、边框样式，但没有多大意义。那么，在这种情况下，我该怎么办呢？我无法修改返回 html 和 css 的外部源的样式。我还尝试在模态关闭后通过 JavaScript(设置 css)强制其样式，但没有多大意义。任何想法？

这是我在 css 和 html 页面中的一些尝试:

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, 
.table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857 !important;
    vertical-align: top !important;
    border-top: 1px solid #e7ecf1 !important;
    vertical-align: middle !important;
}


<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Aaaaaa </th>
            <!-- code omitted for brevity -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>Bbbbbbbbb</td>
                <!-- code omitted for brevity -->
            </tr>
        }
    </tbody>
</table>

Answer 1

您可以删除 <style>关闭模式的标签:

// call this function on closing the modal
function deleteStyleTag() {
  const styleTag = document.querySelector('.modal style');
  // change selector according to your situation

  // remove the <style> tag
  styleTag.parentElement.removeChild(styleTag);
}