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

Я хочу сделать сайт (готово). Затем я добавляю не менее 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

4 ответа

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

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

  3. Используя образец, который вы связали, я скопировал и вставил первую модель 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>