How do I add a 2nd modal to my html page

后端 未结 2 416
[愿得一人]
[愿得一人] 2021-01-24 01:42

I didn\'t explain my problem in my last post.

So I want to add a second modal to my html page so if you click on \"Button 1\" it would open \"Modal 1\" and if you click

2条回答
  •  北海茫月
    2021-01-24 02:38

    You only need one modal -- it's just a DIV structure, nothing magic (the only magic is making it appear/disappear - and bootstrap does that trick). When needed, grab the desired content from where you have it stored, stick it into the modal's .modal-body div, and let bootstrap display it.

    Here's how.

    (1) Store the content for each modal in hidden DIVs elsewhere in the document.

    (2) Give each button an ID with a unique number you can isolate, and give each "hidden modal content div" a name ending with the same number. For example, button "#btn_2" will match with hidden div "#mdl2", which contains the content you want for button #btn_2.

    (3) Use javascript (you are using Bootstrap, which uses jQuery, so why not use jQuery) to swap in the correct content. When you click the button, isolate the number 2 (var buttNum = this.id.split('_')[1]; - try it) and use that to grab the html from the #mdl2 div (var content = $('#mdl'+buttNum).html())

    (4) Let Bootstrap take care of opening/closing the modal.

    Example:

    $('[id^=btn_]').click(function(){
      var buttNum = this.id.split('_')[1];
      //alert(buttNum);
      var content = $('#mdl'+buttNum).html();
      $('#myModal1 .modal-body').html(content);
    });
    #mdl1, #mdl2, #mdl3{display:none;} /*  Hide the divs containing modal content */
    
    
    
      Bootstrap Example
      
      
      
      
      
    
    
    
    

    Re-Using the Same Modal

    Click outside modal to close modal
    ×




    Click outside modal to close modal

    Image of an Animal

    Click outside modal to close modal

    Poem by Ogden Nash

    The hands of the clock were reaching high
    In an old midtown hotel;
    I name no name, but its sordid fame
    Is table talk in hell.
    I name no name, but hell's own flame
    Illumes the lobby garish,
    A gilded snare just off Times Square
    For the maidens of the parish.
    The revolving door swept the grimy floor
    Like a crinoline grotesque,
    And a lowly bum from an ancient slum
    Crept furtively past the desk.
    His footsteps sift into the lift
    As a knife in the sheath is slipped,
    Stealthy and swift into the lift
    As a vampire into a crypt.

提交回复
热议问题