1つのページに2つのブートストラップモーダルを追加する

Question

1つのページに2つのブートストラップモーダルを追加しようとしています。しかし、追加できません。ただ1つのモーダルしか働いていません.2つのボタンに2つのモーダルを追加する必要があります。誰か助けてくれますか？

<div class="container"> 

    <div class="col-lg-12 col-md-12 col-xs-12 padding"> 
    <div class="col-lg-6 col-lg-6 col-xs-12"> 
     <button class="addFavourite" data-toggle="modal" data-target="#myModal">Add Favourite</button> 
    </div> 
    </div> 

    <div class="col-lg-12 col-md-12 col-xs-12 smsDetails"> 
    <a href="#addFavourite" class="col-lg-6 col-md-6 col-xs-6">Send SMS</a> 
    </div> 

    <div class="col-lg-12 col-md-12 col-xs-12 smsDetails"> 
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="post-comment"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
      <label>To:</label><span>ms.tech10@gmail.com</span> 
      <br> 
      <label>Message:</label> 
      <textarea rows="10" cols="70"></textarea> 
      <button>Send Message</button> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <div> 
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="addFavourite"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 
      <h4 class="popupHead">Add Load Route to Favourite</h4> 
      <p>This is a unique feature available only for registered users that allows user to repost the posted load for the given route again and again without the hassle to repost the load. This is helpful if the user has same load requirement frequently. 
       </p> 
      <div> 
       <input type="radio" name="day">1 day 
       <input type="radio" name="day">2 day 
       <input type="radio" name="day">3 day 
      </div> 
      <p><strong>Note:</strong> The load will be reposted repeatedly till the time same is not removed from favourite list.</p> 
      <button class="favouriteConfirm">Add to Favourite and Confirm</button> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

</div> 

ここに完全なコード：あなたは両方に同じIDを使用しているjsFiddle

Answer 1

、あなただけのIDにページごとに単一の時間を参照することができますし、あなたのhrefにdata-toggle="modal"を適用していません。

はModals

実施例を参照してください：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 

 
    <div class="col-xs-12 "> 
 
    <button class="btn btn-default" data-toggle="modal" data-target="#addFavourite">Add Favourite</button> 
 
    </div> 
 

 
    <div class="col-xs-12 "> 
 
    <a class="btn btn-default" type="button" data-toggle="modal" href="#myModal">Send SMS</a> 
 
    </div> 
 

 
    <div class="col-lg-12 col-md-12 col-xs-12 smsDetails"> 
 
    <div class="modal fade " id="myModal" role="dialog" aria-labelledby="post-comment"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body"> 
 
      <label>To:</label><span>ms.tech10@gmail.com</span> 
 
      <br> 
 
      <label>Message:</label> 
 
      <textarea rows="10" cols="70"></textarea> 
 
      <button>Send Message</button> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div> 
 
    <div class="modal fade" id="addFavourite" role="dialog" aria-labelledby="addFavourite"> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-body"> 
 
      <h4 class="popupHead">Add Load Route to Favourite</h4> 
 
      <p>This is a unique feature available only for registered users that allows user to repost the posted load for the given route again and again without the hassle to repost the load. This is helpful if the user has same load requirement frequently. 
 
      </p> 
 
      <div> 
 
       <input type="radio" name="day">1 day 
 
       <input type="radio" name="day">2 day 
 
       <input type="radio" name="day">3 day 
 
      </div> 
 
      <p><strong>Note:</strong> The load will be reposted repeatedly till the time same is not removed from favourite list.</p> 
 
      <button class="favouriteConfirm">Add to Favourite and Confirm</button> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default favouriteConfirm" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>