實現CSS Modal將身體內容向右移

主要內容：

觸發模態：

第一張照片顯示我的網頁的主要內容。第二張照片顯示內容（計劃卡面板）向右/向右延伸。 CSS填充和溢出沒有解決我的問題。

我該怎麼辦？

這是我爲這個特定文件完整的CSS：

<style> 
    body 
    { 
     background-color: #f1f1f1 !important; 
     display: flex; 
     min-height: 100vh; 
     flex-direction: column; 
     padding-left: 240px; 
    } 
    main 
    { 
     flex: 1 0 auto; 
    } 
    header 
    { 
     margin-bottom: 2% !important; 
    } 
    #nav-wrapper 
    { 
     padding-top: 0.4%; 
     background-color: #1976d2 !important; 
    } 
    a .men 
    { 
     padding-top: 0.8%; 
     font-size: 2.8rem; 
     z-index: 0; 
    } 
    @media only screen and (max-width : 992px) 
    { 
    body 
    { 
     padding-left: 0; 
    } 
    } 

    ul .activeTab a 
    { 
     background-color: #ccc !important; 
    } 
    ul li a:hover 
    { 
     background-color: #f1f1f1 !important; 
    } 
    .chPassHeader 
    { 
     font-size: 1.2rem; 
    } 
</style>

這是我的模態

<!-- START : CHANGE PASSWORD MODAL--> 
    <div id="chPassModal" class="modal animated fadeIn"> 

     <div class="modal-content"> 
      <span class="chPassHeader"><i class="material-icons left">mode_edit</i> CHANGE PASSWORD</span> 
      <div class="divider"></div> 
      <p>A bunch of text</p> 
     </div> 

     <div class="modal-footer"> 
      <a class="modal-action modal-close btn-flat">Cancel</a> 
     </div> 
    </div> 
    <!-- END : CHANGE PASSWORD MODAL-->

來源

2016-10-25 SZMN

我有同樣的問題。在函數openModal中給出文件「materialize.js」中的身體寬度造成的移位內容。

var openModal = function($trigger) { 
     var $body = $('body'); 
     var oldWidth = $body.innerWidth(); 
     $body.css('overflow', 'hidden'); 

     $body.width(oldWidth); 

     if ($modal.hasClass('open')) { 
     return; 
     }

的解決辦法是改變

$body.width(oldWidth)

到

$body.width($(window).width());

來源

2017-03-12 21:22:53

我正在使用大屏幕上固定的滑出式菜單。我的解決方案是完全註釋掉該行 – shanehoban

我只是在materialize.js文件和問題走了評論此$body.width(oldWidth)。

來源

2017-08-30 15:31:32 user6022289

這基本上是幾個月前提出的答案的更糟副本。 –

實現CSS Modal將身體內容向右移

回答

相關問題