Question

我有一个投资组合页面，持续12个项目。单击其中一个项目时，将弹出一个模态弹出窗口，您也可以单击它，以便也可以看到图像集，其中我使用了引导轮播。

对于每个项目，我都有一个带有轮播的模式。对于项目1来说，效果很好。但是，一旦我对项目2使用相同的代码，并更改了特定于项目2的某些ID，轮播就无法正常工作-图像根本不会滑动。我尝试更改ID“演示”，以便每个轮播都唯一。但不幸的是，它仍然没有起作用。

除此之外，我对引导模式的行为/外观感到非常满意，并且我希望保留它。

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


</head>



<body>


<div class="content">

        <div id="contact">
                <a href="">About</a>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
               <br>
               <br>
        </div>

    <ul style="list-style: none;">



        <li class="Project" data-modal="myModal_1">

                    <span id="myBtn_1">
                        Wer Baut Der Stadt
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                
                    <div id="myModal_1" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/CAFX/IMG_0546 (1)_Cafx_3-kopi.png" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>
              


            <li class="Project" data-modal="myModal_2">

                    <span id="myBtn_2">
                        Hans Oscar Carlsson
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
                        </p>
                    </div>

                     <div id="myModal_2" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                            <img src="Images/WER BAUT 2018/HVIDAktiv 20.png" width="100%">
                            </div>
                            <div class="carousel-item">
                              <img src="Images/WER BAUT 2018/poster_mockup_MD1 kopi 2-kopi.jpg" width="100%">
                            </div>
                          
                          
                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal..1
                        </p>
                    </div>
        </li>

Answer 1

您的代码中存在多个错误：

您有两个jquery.min.js
有多个未完成的标签
并且您的两个轮播都有相同的id-"demo"

window.onload = function() {
  list = document.querySelectorAll(".Project");
  document.querySelectorAll(".Project").forEach(LIelm => {
    LIelm.addEventListener('click', showHideModal);
  });
};

function showHideModal(e) {
  if (!e.target.parentNode.matches('.Project , .modal-content'))
    return;
  e.preventDefault();
  let currentParent = e.target.parentNode;
  if (currentParent.matches('.Project')) {
    document.getElementById(currentParent.dataset.modal).style.display = "block";
  } else {
    currentParent.parentNode.style.display = "";
  }
}
var myModal_1 = document.getElementById("myModal_1");
var myModal_2 = document.getElementById("myModal_2");
window.onclick = function(event) {
  if (event.target === myModal_1) {
    myModal_1.style.display = "none";
  }
  if (event.target === myModal_2) {
    myModal_2.style.display = "none";
  }

};

@font-face {
  font-family: 'Lirma';
  src: url('Lirma.woff') format('woff2'), url('Lirma.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

ul {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 85vh;
  text-align: left;
}

a {
  margin-left: 40px;
  font-size: 30px;
  color: black;
  text-decoration: none;
}

#contact {
  font-size: 30px;
}

.Describtion {
  font-family: 'Helvetica Neue';
  font-size: 30px;
}

li {
  padding-top: 40px;
}

body {
  font-family: 'Helvetica Neue';
  font-size: 45px;
}

.Project {
  font-family: 'Lirma';
}

.Project:hover {
  cursor: default;
  text-decoration: underline;
}

#year {
  margin-right: 400px;
  float: right;
}

p {
  display: inline-block;
  text-align: left;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 30px;
  width: 700px;
}


/* The Modal (background) */

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 1200px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="content">
  <div id="contact">
    <a href="">About</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact: c.thornval@live.dk &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0045 &nbsp;7158&nbsp;0488
    <br>
    <br>
  </div>
  <ul style="list-style: none;">
    <li class="Project" data-modal="myModal_1">
      <span id="myBtn_1">
                        Wer Baut Der Stadt
                    </span>
      <span id="year">
                        2019
                    </span>
      <div class="Describtion">
        <p style="display:none;">
          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
        </p>
      </div>
      <div id="myModal_1" class="modal">
        <div class="modal-content">
          <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <!-- Left and right controls -->
              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
            <p>Some text in the Modal..1</p>
          </div>
        </div>
      </div>
    </li>
    <li class="Project" data-modal="myModal_2">
      <span id="myBtn_2">
                        Hans Oscar Carlsson
                    </span>
      <span id="year">
                        2019
                    </span>
      <div class="Describtion">
        <p style="display:none;">
          Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
        </p>
      </div>
      <div id="myModal_2" class="modal">
        <div class="modal-content">
          <div id="demo1" class="carousel slide" data-ride="carousel">
            <!-- The slideshow -->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <div class="carousel-item">
                <img src="https://via.placeholder.com/350x150.png?text=replace+this+image+with+your+image" style="width:100%" alt="img">
              </div>
              <!-- Left and right controls -->
              <a class="carousel-control-prev" href="#demo1" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
              </a>
              <a class="carousel-control-next" href="#demo1" data-slide="next">
                <span class="carousel-control-next-icon"></span>
              </a>
            </div>
            <p>Some text in the Modal..1</p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 2

非常感谢您的详尽而详尽的答复。我终于使它成功了！但是，我没有使用您发布的javascript代码，因为我没有使用它，并且在使用javascript时没有任何效果。

同一页上的多个Bootstrap Modal轮播无法正常工作

2 个答案: