открыть несколько модальных, поместив новый поверх активного модального - PullRequest
Новая
       22

открыть несколько модальных, поместив новый поверх активного модального

0 голосов
/ 04 марта 2019

Как открыть несколько модов, поместив новый мод поверх активного, а также увеличив оверлей css старого, если снова щелкнуть, чтобы открыть.

Использую приведенный ниже код jquery для открытия нескольких загрузчиковмодальный, но проблема в том, что когда я щелкаю, чтобы открыть предыдущий активный модал после того, как открыто более одного, используемый мной jquery не устанавливает правильный css index overlay. 

$(document).ready(function() {

    $('.modal').on('hidden.bs.modal', function(event) {
        $(this).removeClass( 'fv-modal-stack' );
		$(this).removeClass(function(i, c) {return c.match(/fv-modal-index-\d+/g).join(" ");});
        $('body').data( 'fv_open_modals', $('body').data( 'fv_open_modals' ) - 1 );
    });

    $('.modal').on('shown.bs.modal', function (event) {
        // keep track of the number of open modals
        if ( typeof( $('body').data( 'fv_open_modals' ) ) == 'undefined' ) {
            $('body').data( 'fv_open_modals', 0 );
        }

        // if the z-index of this modal has been set, ignore.
        if ($(this).hasClass('fv-modal-stack')) {
            return;
        }

        $(this).addClass('fv-modal-stack');
        $('body').data('fv_open_modals', $('body').data('fv_open_modals' ) + 1 );
		
		var newIndex_x = 1040 + (10 * $('body').data('fv_open_modals' )), 
				newIndex_y = 1039 + (10 * $('body').data('fv_open_modals'));
		
		 $(this).css('z-index', newIndex_x).attr("data-index", newIndex_x).addClass("fv-modal-index-"+newIndex_x);
        $('.modal-backdrop').not('.fv-modal-stack').css('z-index', newIndex_y).addClass("backdrop-index-"+newIndex_y);
        $('.modal-backdrop').not('fv-modal-stack').addClass('fv-modal-stack'); 
    });        
	
	
	$(document).on("click", ".openModa", function(){
		var element = $(this).attr("data-target");
		openModal(element);
	});

});


function openModal(element){
	if($(element).css('display') == 'block'){
		var oldIndex = parseInt($(element).attr("data-index")), 
			newIndex_x = oldIndex + (10 * $('body').data('fv_open_modals' )), 
			newIndex_y = (oldIndex-1) + (10 * $('body').data('fv_open_modals'));
						
		$(element).css('z-index', newIndex_x).attr("data-index", newIndex_x)
		.removeClass("fv-modal-index-"+oldIndex).addClass("fv-modal-index-"+newIndex_x);
		$('.modal-backdrop.backdrop-index-'+ (oldIndex-1)).not('.fv-modal-stack').css('z-index', newIndex_y)
		.removeClass('backdrop-index-'+ (oldIndex-1)).addClass("backdrop-index-"+newIndex_y);
	}else{
		$(element).modal({
			backdrop: true,
			keyboard: false
		});
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<button type="button" class="openModa" data-target="#exampleModal1">open 1</button>
<button type="button" class="openModa" data-target="#exampleModal2">open 2</button>
<button type="button" class="openModa" data-target="#exampleModal3">open 3</button>

<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	   Example 1 is open now, click on
       <button type="button" class="openModa" data-target="#exampleModal2">open 2</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	   Example 2 is open now, click on
       <button type="button" class="openModa" data-target="#exampleModal3">open 3</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title 3</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	   Example 3 is open now, click on open 1, then close it and open it again
       <button type="button" class="openModa" data-target="#exampleModal1">open 1</button>
       At first click after you close it, it will be under modal 3, because they has same css index, but when you click on open 1 again it will then come up.
      </div>
    </div>
  </div>
</div>

Я создал небольшую функцию для увеличения индекса CSS, если модал был открыт, но все же он не работает хорошо.Вы можете понять, что я имею в виду, когда нажимаете на шаг за шагом, чтобы открыть модал.

...