구체화 CSS 모달이 본문 내용을 오른쪽으로 이동

저는이 커뮤니티에서 새롭게 왔습니다.구체화 CSS 모달이 본문 내용을 오른쪽으로 이동

주요 내용 : 모달 트리거

첫 번째 사진은 내 페이지의 주요 내용을 표시합니다. 두 번째 그림은 내용 (일정 카드 패널)이 오른쪽으로 확장/이동한다는 것을 보여줍니다. 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

난 그냥 같은 문제가 있습니다. 파일 "materialize.js"의 몸체 폭을 주어서 발생 된 내용을 이동 openModal에서 이동합니다.

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

     $body.width(oldWidth); 

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

이 솔루션은 그냥 사라 materialize.js 파일 및 문제이 $body.width(oldWidth) 댓글을 달았습니다

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

출처

2017-03-12 21:22:53

대형 화면에서 고정되는 슬라이드 아웃 메뉴를 사용하고 있습니다. 내 해결책은 그 라인을 모두 주석으로 처리하는 것입니다. – shanehoban

에

$body.width(oldWidth)

을 변경하는 것입니다.

출처

2017-08-30 15:31:32 user6022289

이것은 기본적으로 몇 달 전 제안 된 답변의 더 나쁜 사본입니다. –

구체화 CSS 모달이 본문 내용을 오른쪽으로 이동

답변

관련 문제