Question

最近几天，我一直在用模态风格挣扎。我有一个帮助模式，可以打开一个外部help.html文件，然后在父HTML文档中打开所有其他模式（即表）。如果我在不打开帮助模式的情况下打开其他模式，则该样式对所有模式都是正确的。如果打开帮助模式，则样式完全正确。问题是，如果我打开帮助模态，然后再打开其他任何模态，则它们都将以页脚按钮在表格的右边框和模态的可见部分的右端之间以太多的空白打开被推到右边。没有引发任何错误，我检查了是否应用了正确的CSS。我尝试将所有用于帮助模式的CSS放在文件中的样式标签中，我尝试向该帮助模式对话框中添加一个ID，并仅对该ID进行样式设置，我尝试仅在jQuery中对帮助模式进行样式设置。什么都没用，虽然现在比以前好了-之前，我打开帮助模式，然后打开其他模式之一，其他模式一直向左移动并延伸到屏幕的右侧。

这是help.html文件中的所有代码：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" onclick="hideModal()">×</button>
        <h3><span class="glyphicon glyphicon-question-sign"></span> &nbsp;Help Section</h3>
</div>

<style>
    .modal-body {
        width: 97%;
    }

    .modalp {
        margin-top: 10px;
        border-bottom: 1px solid #CCC;
        padding-bottom: 19px;
        padding-top:9px;
    }
</style>

<div class="modal-body">
    <p class="modalp"><span class="glyph-wrap glyphicon glyphicon-plus-sign" style="color: #486486;"></span> Menu items with this icon contain subtopics. Click the topic or the plus sign to see subtopics</p>
    <p class="modalp"><span class="glyph-wrap glyphicon glyphicon-minus-sign" style="color: #486486;"></span> Subtopics will collapse when you select the topic again, the minus sign, or any other menu item.</p>
    <p class="modalp"><span class="glyph-wrap glyphicon glyphicon-th-list" style="color: #486486;"></span> Menu items with this icon will open a printable table in a new window. Click the <b>Close button</b> below the table or the X in the upper-right corner of the window to close it. To print the table, click the <b>Print button</b>. If you select the Print option, you can either print the table directly, or save it as a PDF file; Chrome users should change the Destination field to Save as PDF; IE and Edge users should select Microsoft Print to PDF in the General tab. <strong>Note:</strong> You need to close the table window before selecting another menu item.</p>
    <p class="modalp">Click the close link in the lower-right of the step-actions for a topic to close it or you can just click another menu item in the main menu.</p>
</div><!-- close `enter code here`modal-body -->
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" onclick="hideModal()">Close</button>
</div>

这里是JSFiddle，它具有与其他模式相关的代码-希望敏锐的眼睛可以捕捉到我所缺少的内容（假设甚至可以做到）。

以下是模式的CSS：

/*myModal is for the help modal*/
    #myModal {
       top: 157px;
       left: 784px;
       height: auto;
     }

     /*Below is the regular modal style*/
     /* Modal Background */
     .modal {
       top: 0;
       left: 0;
       width: auto;
       height: 87%;
       overflow: auto;/* Enable scroll if needed */
     }

     .modal-dialog {
       position: relative;
       max-width: 90%;
       padding-right: 0;
     }

     /* Modal Content */
     .modal-content {
       position: absolute;
       background-color: #EEE;
       margin: auto;
       padding: 5px 8px 5px;
       border: 1px solid #CCC;
       color: #486486;
     }

     /*Modal Header*/
     .modal-header {
       padding: 2px 10px;
       color: #486486;
     }

     /* The Header Close Button */
     .close {
       float: right;
       font-weight: bold;
       margin-right: 0;
     }

     .close:hover,
     .close:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
     }

     /* Modal Body */
     .modal-body {
       margin-right: -175px;
       margin-left: 15px;
       padding-bottom: 0;
       overflow-y: auto;
     }

     .modal p {
       color: #333;
       text-align: left;
       padding-left: 5px;
     }

     /* Modal Footer */
     .modal-footer {
       padding: 0;
     }

     /*The Footer Print Button*/
     .print-btn {
       font-size: 28px;
       font-weight: bold;
     }

     .print-btn:hover,
     .print-btn:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
     }

     /* The Footer Close Button */
     .close-btn {
       color: #aaa;
       font-size: 28px;
       font-weight: bold;
     }

     .close-btn:hover,
     .close-btn:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
     }

这是jQuery：

    function loadHelp() {
        $.ajax({url: "../help.html", success: function(result){
        $("#modal-content").html(result);
       }});
    }

    function toggleHelp() {
      $('#myModal').show();
      $('#myModal').css('opacity', '1');
      loadHelp();
      $('.modal-content').css('width', '70%');
    }

    function hideModal() {
      $('#myModal').hide();
      $('#myModal').css('opacity', '0');
      loadHelp.abort(); //Added in case loadHelp() is still running and messing up other modals' style
    }

    function toggleTblModal() {
      $('#TblModal').show();
      $('.modal-content').css('width', '155%');
    }

    function hideTblModal() {
      $('#TblModal').hide();
    }

Answer 1

因此，看来我想出了一个不错的解决方法。我发现如果自己修改表格样式，就可以解决我的问题。

不同样式的CSS是否不同？

1 个答案: