

3秒たったらモーダルが自動で消えるように設定したのですが、  
自動で消えた後`$(modal).removeClass('SlideIn');$('body').removeClass('lock');`  
をして、再度削除ボタンを押せるようにしたいのですが、  
`removeClass`にならず、削除ボタンをクリックすることができません。

下記の2つを試してみたのですが、うまくいきませんでした。。

[code]

     var modalFadeout = $('.ModalOpen').click(function(){
      　$(modal).delay(3000).fadeOut('slow');
     });
     modalFadeout.done(function() {
       $(modal).removeClass('SlideIn');
       $('body').removeClass('lock');
     });
    
[/code]

[code]

     $('.ModalOpen').click(function(){
        if($(modal).delay(3000).fadeOut('slow')){
          $(modal).removeClass('SlideIn');
          $('body').removeClass('lock');
        }
     });
    
[/code]

jQueryの理解も低く、不足した情報があるかもしれませんが、  
ご教授のほどよろしくお願いいたします。

[code]

    jQuery(function(){
      var modal;
      $('.ModalOpen').click(function(){
        $('body').addClass('lock');
        modal = '#' + $(this).attr('data-target');
        $(modal).addClass('SlideIn');
      });
    
      $('.ModalClose').off().click(function(){
        if (!modal) return;
        $(modal).removeClass('SlideIn');
        $('body').removeClass('lock');
      });
    
      $('.ModalOpen').click(function(){
       $(modal).delay(3000).fadeOut('slow');
      });
    });
[/code]

[code]

    .modal-content-drawer {
      background-color: #f7f4f4;
      opacity: 0.95;
      box-sizing: border-box;
      text-align: center;
      width: 80%;
      height: 120px;
      position: fixed;
      top: -120px;
      z-index: 999;
      overflow: auto;
      display: block;
      left: 10%;
      transition: ease .6s;
      box-shadow: 2px 2px 4px rgb(156, 156, 156);
    }
    .lock{
      overflow: hidden;
    }
    .SlideIn {
      display: block;
      top: 70px;
    }
    @media (max-width: 767px) {
      .modal-content-drawer {
        top: -170px;
      }
      .SlideIn {
        top: 140px;
      }
    }
    .modal-header-drawer {
      padding: 15px 0 5px;
      border-bottom: 1px solid #bebdbdde;
      position: relative;
    }
    .modal-header-drawer i {
      position: absolute;
      right: 20px;
      top: 15px;
    }
    .modal-body-drawer {
      padding: 15px 0 10px;
    }
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <button class="ModalOpen btn btn-remove btn-sm pull-right" data-target="modal-content-01">削除</button>
     
    <div id="modal-content-01" class="modal-content-drawer">
      <div class="modal-header-drawer">
        <button type="button" class="ModalClose btn btn-sm pull-right" data-dismiss="modal" aria-label="Close">
          <i class="fa fa-times fa-2x"></i>
        </button>
        <h5>削除</h5>
      </div>
      <div class="modal-body-drawer">
        <p>削除しました</p>
      </div>
    </div>
[/code]


CC BY-SA 4.0
2019-09-20T01:14:20.220
59169
2019-09-20T01:25:01.103
2019-09-20T01:25:01.103
35901
35901
question
jquery
jQuery モーダルを自動で消えるようにした後、再度ボタンをクリックできるようにする方法