css 在多个弹出模态中创建带有下一个/上一个按钮的多个选项卡

b4lqfgs4  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(92)

我正在一个单一的HTML页面上的知识库。这个想法是，我有8弹出模态，每个模态将有自己的步骤。步骤将与标签创建，我想添加next/previous按钮到每个模态的每个标签。
现在，我有8个pop-up modals。我已经在所有模态的所有标签上添加了带有按钮的标签。我正在为以下问题而挣扎：当我打开第一个模态并点击下一个/上一个时，它可以工作，但它对所有模态都有效。所以在第一个模态中，我点击下一个10次，然后关闭第一个模态，并在第4步结束模态3。我想要的是每个modal/tab都有自己的下一个和上一个模态，而不是一个全局previous/next按钮，它对所有选项卡都有效，但只在一个模态中有效。
此外，有时模式弹出窗口不工作..我必须点击多次才能打开，有时它一次打开..
这个问题我已经纠结了好几天了，我觉得可能是JS的问题，谁能帮帮我啊？我真的很感激......我在网上到处找解决方法，但是没有。
下面是代码：

// Pop Ups JS
// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target.classList.contains('modal')) {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}



// Tabs JS
let currentSection = 0;
let sections = document.querySelectorAll(".section");
let sectionButtons = document.querySelectorAll(".nav > li");
let nextButton = document.querySelector(".next");
let previousButton = document.querySelector(".previous");
for (let i = 0; i < sectionButtons.length; i++) {
  sectionButtons[i].addEventListener("click", function() {
    sections[currentSection].classList.remove("active");
    sectionButtons[currentSection].classList.remove("active");
    sections[currentSection = i].classList.add("active");
    sectionButtons[currentSection].classList.add("active");
    if (i === 0) {
      if (previousButton.className.split(" ").indexOf("disable") < 0) {
        previousButton.classList.add("disable");
      }
    } else {
      if (previousButton.className.split(" ").indexOf("disable") >= 0) {
        previousButton.classList.remove("disable");
      }
    }
    if (i === sectionButtons.length - 1) {
      if (nextButton.className.split(" ").indexOf("disable") < 0) {
        nextButton.classList.add("disable");
      }
    } else {
      if (nextButton.className.split(" ").indexOf("disable") >= 0) {
        nextButton.classList.remove("disable");
      }
    }
  });
}

nextButton.addEventListener("click", function() {
  if (currentSection < sectionButtons.length - 1) {
    sectionButtons[currentSection + 1].click();
  }
});

previousButton.addEventListener("click", function() {
  if (currentSection > 0) {
    sectionButtons[currentSection - 1].click();
  }
});
/*==================== MODAL CSS ====================*/

body {
  font-family: Arial, Helvetica, sans-serif;
}

.button {
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */

.modal-content {
  position: fixed;
  bottom: 0;
  background-color: #3b6e88;
  width: 100%;
  height: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */

.close {
  color: white;
  float: right;
  font-size: 75px;
  font-weight: 100;
  margin-top: 12px;
  margin-right: 27px;
  ;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #3b6e88;
  color: white;
}

.modal-body {
  padding: 2px 16px;
  background-color: #3b6e88;
  color: white;
}

.modal-footer {
  padding: 2px 16px;
  background-color: #3b6e88;
  color: white;
}

/* Add Animation 
        @-webkit-keyframes slideIn {
          from {bottom: -300px; opacity: 0} 
          to {bottom: 0; opacity: 1}
        }
        
        @keyframes slideIn {
          from {bottom: -300px; opacity: 0}
          to {bottom: 0; opacity: 1}
        }
        
        @-webkit-keyframes fadeIn {
          from {opacity: 0} 
          to {opacity: 1}
        }
        
        @keyframes fadeIn {
          from {opacity: 0} 
          to {opacity: 1}
        }*/

/*================= TAB CSS=============== */

.section {
  display: none;
}

.section.active {
  display: block;
}

.invisible {
  display: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

ul li {
  background: #ccc;
  padding: 8px 15px;
  margin-left: 6px;
  border-radius: 5px;
  cursor: pointer;
  opacity: .5;
  color: #3b6e88;
  font-size: 17px;
}

ul li.active {
  opacity: 1 !important;
}

.next,
.previous {
  padding: 15px 10px;
  border-radius: 6px;
  background: deepskyblue;
  color: white;
  border: 0;
  outline: none;
  cursor: pointer;
  width: 100px;
}

.next.disable,
.previous.disable {
  opacity: .5;
}
<!-- MODAL BUTTONS -->
<section>
  <div>

    <div>

      <!-- Modal 1 -->
      <button href="#myModal1" class="modal-button">
                    <p>Modal 1</p>
                </button>

      <!-- Modal 2 -->
      <button href="#myModal2" class="modal-button">
                    <p>Modal 2</p>
                </button>

      <!-- Modal 3 -->
      <button href="#myModal3" class="modal-button">
                    <p>Modal 3</p>
                </button>

      <!-- Modal 4 -->
      <button href="#myModal4" class="modal-button">
                    <p>Modal 4</p>
                </button>

      <!-- Modal 5 -->
      <button href="#myModal5" class="modal-button">
                    <p>Modal 5</p>
                </button>

      <!-- Modal 6 -->
      <button href="#myModal6" class="modal-button">
                    <p>Modal 6</p>
                </button>

      <!-- Modal 7 -->
      <button href="#myModal7" class="modal-button">
                    <p>Modal 7</p>
                </button>

      <!-- Modal 8 -->
      <button href="#myModal8" class="modal-button">
                    <p>Modal 8</p>
                </button>

    </div>

  </div>
</section>


<!-- MODALS POP UPS HTML -->
<!-- Modal 1 -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 1</p>
      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 2 -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 2</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 3 -->
<div id="myModal3" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 3</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 4 -->
<div id="myModal4" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 4</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 5 -->
<div id="myModal5" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 5</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 6 -->
<div id="myModal6" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 6</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 7 -->
<div id="myModal7" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 7</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>

<!-- Modal 8 -->
<div id="myModal8" class="modal">

  <!-- Modal content -->
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <ul class="nav">
        <li class="active" data-cont="r1">Step 1: Test</li>
        <li data-cont="r2">Step 2: Test</li>
        <li data-cont="r3">Step 3: Test</li>
      </ul>

      <!-- Prev/Next Buttons -->
      <button class="previous disable" data-id="previous">Previous</button>
      <button class="next" data-id="next">Next</button>

      <!-- Close Modal -->
      <span class="close">×</span>
    </div>

    <!-- Modal Body -->
    <div class="modal-body">
      <p> Modal 8</p>

      <!-- Step 1-->
      <section data-id="r1" class="section section-one active">
        <p>Section 1 </p>
      </section>

      <!-- Step 2 -->
      <section data-id="r2" class="section section-two">
        <h2>Section 2</h2>
      </section>

      <!-- Step 3 -->
      <section data-id="r3" class="section section-three">
        <h2>Section 3</h2>
      </section>

    </div>
  </div>
</div>
css

1条答案

按热度按时间
7bsow1i6

7bsow1i61#

你能试试这样的东西吗？代码没有经过测试，但概念是下一个：在打开模态触发器时，删除所有“活动”类，然后在第一个选项卡上添加活动类：

for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function(e) {
      e.preventDefault();
      modal = document.querySelector(e.target.getAttribute("href"));
      modal.style.display = "block";

      // Remove all active tabs
      var elems = document.querySelectorAll("#" + e.target.id + ">li.active");
      [].forEach.call(elems, function(el) {
        el.classList.remove("active");
      });
      // Add active on first element
      elems[0].classList.add('active')
  }
}
赞(0）分享  回复(0）举报  2023-01-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com