Несколько Bootstrap модальных каруселей на одной странице, не работает - PullRequest
Новая
       37

Несколько Bootstrap модальных каруселей на одной странице, не работает

0 голосов
/ 21 февраля 2020

У меня есть страница портфолио, продолжительностью 12 проектов. При нажатии на один из проектов появляется модальное всплывающее окно, и вы можете щелкнуть его, чтобы увидеть галерею изображений, где я использую карусель bootstrap.

Для каждого проекта у меня есть модал с каруселью. И для проекта 1, который работает просто отлично. Но как только я использую тот же кусок кода для проекта 2 и изменяю некоторые параметры id c на проект 2, карусель не работает - изображения просто не скользят. Я попытался изменить идентификатор "демо", чтобы он был уникальным для каждой карусели. Но, к сожалению, это все еще не сработало.

Кроме этого, я действительно доволен тем, как действует / выглядит мой мод бутстапа, и я хотел бы сохранить его. 

 <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>

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Большое спасибо за ваш продуманный и обстоятельный ответ. Я наконец заставил его работать! Тем не менее, я не использую код javascript, который вы опубликовали, поскольку я заставил его работать без, и при использовании javascript.

эффекта не было.
0 голосов
/ 21 февраля 2020

В вашем коде было несколько ошибок:

  1. у вас было два jquery.min.js
  2. было несколько незаконченных тегов
  3. и у вас было такое же 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>
...