不同模式的不同 CSS？

Question

I have been struggling for the last several days with modal styles. I have a help modal that opens an external help.html file and then all other modals, which are tables, open within the parent HTML document. If I open the other modals without opening the help modal, the style is exactly right for all of them; if I open the help modal, the style is exactly right. The problem is, if I open the help modal and then open any of the other modals, they all open with way too much white space between the right border of the table and the right end of the visible part of the modal with the footer buttons having been pushed to the right. No error is being thrown and I checked to see that the correct CSS is being applied. I've tried putting all CSS for the help modal inside style tags in the file, I tried adding an ID to the help modal-dialog and style just that ID, I tried styling the help modal only in the jQuery. Nothing has worked, though it's better now than it was - previously after I opened the help modal and then one of the other modals, the other modals moved all the way to the left and stretched beyond the right side of my screen.

Here is all of the code inside the help.html file:

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

Here is a JSFiddle with the code associated with the other modals - hopefully a keen eye can catch what I'm missing (assuming what I want to do is even possible).

Below is the CSS for the modals:

/*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;
     }

And here is the 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

So, it appears I figured out a decent workaround. I found if I modify the table styles themselves, it fixed my problem.