激活模式时隐藏其他切换

Question

I have two modals, left and right, each drop down when clicked and want to have only one toggle appear as an on/off when activated.

Right now, both toggles appear when either modal is on. When the LEFT toggle is on and the modal drops down I want to hide the RIGHT toggle button and modal (and vice versa).

 // common close button $('.toggle').click(function() { $(this).closest(".modal").toggleClass('modal-visible'); }); // explicit button per modal $('.toggle').on('click', function(e) { var modalid = $(this).data("modal-id"); $(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible'); });

 .modal { position: fixed; z-index: 10000; /* 1 */ top: 0; left: 0; visibility: hidden; width: 100%; height: 100%; box-sizing: border-box; }.modal.modal-visible { visibility: visible; }.modal-overlay { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 0%; background: #fff; visibility: hidden; opacity: 0; transition: visibility 0s height 0.5s; box-sizing: border-box; }.modal.modal-visible.modal-overlay { opacity: 1; visibility: visible; transition-delay: 0s; }.modal-wrapper { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; margin-left: 0; background-color: #fff; box-sizing: border-box; }.modal-transition { transition: all 0.5s; transform: translateY(-100%); opacity: 1; }.modal.modal-visible.modal-transition { transform: translateY(0); opacity: 1; }.modal-header, .modal-content { padding: 1em; }.modal-header { position: relative; top: 10%; background-color: #fff; }.modal-close { position: fixed; top: 0; right: 0; padding: 1em; color: #aaa; background: none; border: 0; font-size: 18px; }.modal-close:hover { color: #777; }.modal-heading { font-size: 1.125em; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.modal-content>*:first-child { margin-top: 0; }.modal-content>*:last-child { margin-bottom: 0; }.modal.modal-scroll.modal-content { max-height: 100%; overflow-y: scroll; }.modal.modal-scroll.modal-wrapper { position: absolute; z-index: 9999; top: 2em; left: 50%; width: 32em; margin-left: -16em; background-color: #CDf; box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35); box-sizing: border-box; } button { background: transparent; font-family: 'Republique', sans-serif; font-variant: normal; font-weight: 400; font-size: 24px; line-height: 0.5; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; letter-spacing: .4px; color: #000; cursor: pointer; outline: 0; border: 0; padding: 4px; } #righty { position: fixed; right: 10px; top: 10px; z-index: 100000; } #lefty { position: fixed; left: 10px; top: 10px; z-index: 100000; } body { background: black; } button { mix-blend-mode: difference; color: white; } button:hover { color: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="toggle" data-modal-id="lefty" id="lefty">LEFT</button> <button class="toggle" data-modal-id="righty" id="righty">RIGHT</button> <div class="modal" data-modal-id="lefty"> <div class="modal-overlay toggle"></div> <div class="modal-wrapper modal-transition"> <div class="modal-header"> <button class="modal-close toggle"></button> <h2 class="modal-heading">This is a modal on the left</h2> </div> <div class="modal-body"> <div class="modal-content"> </div> </div> </div> </div> <div class="modal" data-modal-id="righty"> <div class="modal-overlay toggle"></div> <div class="modal-wrapper modal-transition"> <div class="modal-header"> <h2 class="modal-heading">This is a modal on the right</h2> </div> <div class="modal-body"> <div class="modal-content"> </div> </div> </div> </div>

https://jsfiddle.net/envague/9x2vsw6h/1/

I tried various routes in CSS (nested divs, display:none, etc.) and struggling to find a solution. My javascript knowledge is very rudimentary, so perhaps there is a path there?

Answer 1

I added 4 lines in your JS: Close every modal by removing the modal-visible class if you didn't click on the same button, if you did click on the same, it just ignore it and toggle the class.

// common close button
$('.toggle').click(function() {
  $(this).closest(".modal").toggleClass('modal-visible');
});

// explicit button per modal
$('.toggle').on('click', function(e) {
  var modalid = $(this).data("modal-id");
  var visible = $('.modal-visible').data("modal-id");
  //check if the IDs are not the same
  if (visible != modalid) {
          $('.modal-visible').removeClass('modal-visible'); 
  }
  $(`.modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});