Почему тело из первого модала отображается во втором? - PullRequest
Новая
       2

Почему тело из первого модала отображается во втором?

0 голосов
/ 05 марта 2020

Я хотел сделать информацию windows, чтобы при нажатии кнопки появлялось информационное окно с описанием. Я написал самое элементарное модальное всплывающее окно, продублировал его, но возникла проблема: описание во втором и всех последующих всплывающих окнах) берется только из первого модального окна, несмотря на то, что текст внутри другого , Я чувствую себя полным идиотом, но я уже все перепробовал, поэтому я должен попросить о помощи здесь ...

Вот пример jsfiddle - https://jsfiddle.net/rw5np6jv/1/

Вот код: 

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Title 1</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Header:</h4>
</div>
<div class="modal-body">Message - 1</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Вы не изменили атрибут data-target и div class для второй кнопки. Вот почему вы просматривали одинаковое содержимое на обеих кнопках.

Оформить заказ: https://jsfiddle.net/o8d4fjLx/

Код: 

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal">Title 1</button>
 <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="dialog">
  <div class="modal-content">
  <div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
    <h4 class="modal-title">Header:</h4>
  </div>
<div class="modal-body">Message - 1</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>

<button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal2">Title 2</button>
<div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Header:</h4>
</div>
<div class="modal-body">Message-2</div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div>
</div>
</div>
0 голосов
/ 05 марта 2020

Каждая кнопка и модальное div должны иметь уникальный и одинаковый ID : 

<button data-target="#myModal_2" ...>Title 2</button>
<div id="myModal_2" ...>

https://jsfiddle.net/6mqty0oh/

...