Как сделать модалы с различным содержанием

Я хочу сделать сайт (готово). Затем я добавляю не менее 30 кнопок, и когда вы нажимаете первую кнопку, простой модальный приходит с возможностью закрыть, но когда вы нажимаете вторую кнопку, то же самое происходит! Это просто еще один контент.

Позвольте мне попытаться сказать вам это на моем плохом языке программирования.

<div class="button" id="modal1">1</div>

если pressed = "modal1"открывается.

<div class="button" id="modal2">2</div>

îf pressed = "modal2"открывается с другим содержимым.

Я бы добавил некоторый код, но у меня нет больше, чем Bootstrap: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

Саймон, 27.12.2016 в 02:49 (источник)

4 ответа

Если вы используете Bootstrap modal u нужно просто изменить data-target и crate modals для всех кнопок.

Милан,
27.12.2016 в 02:56
просто проверьте эту ссылку http://www.w3schools.com/bootstrap/bootstrap_modal.asp это объясняет, как работает модальный. Вы должны иметь data-toggle=» modal «data-target=» #myModal «в элементе, который вы нажимаете, чтобы открыть модальный, и вам нужно упомянуть» #myModal » как идентификатор целевого модального, используйте другой идентификатор, чтобы открыть другой модальный.

Сатиш Кумар,
27.12.2016 в 03:15
Вы можете увидеть мои три модала, как я сказал, вам просто нужно изменить data-target="#myModal1" and id="myModal1"
`https://jsfiddle.net/milanpanin/b2pyb6Lq/

Милан,
27.12.2016 в 03:16

Используя образец, который вы связали, я скопировал и вставил первую модель div во вторую и внес незначительные изменения, чтобы вы могли видеть разницу при нажатии на кнопки.
Затем я скопировал и вставил кнопку и изменил атрибут data-target во второй кнопке в соответствии с div, который я добавил.

        <div class="container">
          <h2>Modal Example</h2>
          <!-- Trigger the modal with a button -->

            <!-- data-target in the first button matches the id of the first div below -->
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <!-- the second button data-target matches the id of thj e second div below -->
          <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
          <!-- Modal -->
          <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                  <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

            </div>
          </div>

          <!-- this is copied from the first div, given its own id -->
           <div class="modal fade" id="myModal2" role="dialog">
            <div class="modal-dialog">

              <!-- Modal content-->
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Modal Header 2</h4>
                </div>
                <div class="modal-body">
                  <p>Some text in the modal. model 2</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
              </div>

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