Question

当我单击“发送消息”按钮时，会打开多个模式，我只想打开一个模式。

所以我的问题是：如何打开同一类的多个引导程序模态的第一个元素？

我的html代码：

<!-- 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

您的代码中有一些错别字，这会导致您遇到问题。

首先，此行：<h4>Send message to ferair</strong></h4>。您正在关闭一个强大的标签，但从未打开过。两种模态都是如此。

第二行：<textarea class="message-content-form" rows="3" placeholder="Write your message here" name"message-content-form"></textarea>您输入的名称后没有=符号。同样，这是两个模态上的问题。

最后，您为两个模态使用相同的ID。因此，匹配和都被激活。如果您使用唯一的ID，请your code works perfectly。

编辑：我误解了问题，您希望保持课程不变。您可以使用.first（）函数选择JQuery选择的第一个结果。如果您update your Javascript to this，它将起作用：

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');
  });
}

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

1 个答案: