如何用同一个类打开多个模态

Question

When I click on 'send message' button multiple modals open, what I want is only one modal opens.

So my question is: How to open the first element of multiple bootstrap modals with the same class?

My html code:

<!-- button -->                                                    
<div class="btn-group btn-group-xs">
  <button type="button" class="btn btn-default tooltiped" data-toggle="tooltip" title="Send a message" style="min-width:65px;" onclick="message_modal(46)"><i class="fa fa-envelope"></i> Message</button>
</div>    

<!-- message Modal -->
<div class="modal fade message-modal-46"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header message-modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4>Send message to ferair</strong></h4>
      </div>
      <div class="modal-body message-body">
        <div class="alert-notify-modal"></div>
        <form class="orb-form">
          <section>
            <label class="label"><strong>Votre message</strong></label>
            <label class="textarea">
            <textarea class="message-content-form" rows="3" placeholder="Write your message here" name"message-content-form"></textarea>
            </label>
           </section>
         </form>
       </div>

       <div class="data-thread-id hidden" data-thread-id="43"></div>
       <div class="data-receiver-id hidden" data-receiver-id="46"></div>

       <div class="modal-footer message-footer">
         <button type="button" class="btn btn-default modal-close" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary modal-message-submit-btn">send</button>
       </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->                          
<!--/ Message Modal -->

JQUERY:

var session_user_id = 1;

//Open message modal
function message_modal(type_id){

   //If not loggedin redirect to login page
   if(!session_user_id){

      window.location.href = base_url+"users/login";
      return;
   }

   //We refresh the div to show message modal 
   $(".message-modal-"+type_id).load(location.href+" .message-modal-"+type_id+">*", function () {

     $(".message-modal-"+type_id).modal('show');

   });
}

JSFIDDLE

Answer 1

There are a few typos in your code, which cause the issue you're running into.

First, this line: <h4>Send message to ferair</strong></h4> . You are closing a strong tag, but you never opened one. This is true for both modals.

Secondly, this line: <textarea class="message-content-form" rows="3" placeholder="Write your message here" name"message-content-form"></textarea> The name you give does not have a = sign after it. Again this is an issue on both modals.

Lastly, you use the same ID for both modals. Because of this, both match and are activated. If you use unique IDs, your code works perfectly .

Edit: I mis-read the question, you wish to keep the classes unchanged. You can select the first result of a JQuery selection with the .first() function. If you update your Javascript to this , it'll work:

var session_user_id = 1;

//Open message modal
function message_modal(type_id){
  //If not loggedin redirect to login page
  if(!session_user_id){
    window.location.href = base_url+"users/login";
    return;
  }

  //We refresh the div to show message modal 
  $(".message-modal-"+type_id).first().load(location.href+" .message-modal-"+type_id+">*", function () {
    $(".message-modal-"+type_id).first().modal('show');
  });
}