如何打开具有相同类的多个模态答案

【问题标题】：How to open multiple modals with same class如何打开具有相同类的多个模态
【发布时间】：2018-10-21 11:00:42
【问题描述】：

当我点击“发送消息”按钮打开多个模式时，我想要的是只打开一个模式。

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

我的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 -->

查询：

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

【问题讨论】：

使用 jQuery，您可以使用 eq(0) 选择第一个匹配的元素（0 因为匹配元素的数组索引为 0）。要获取 DOM 元素，请使用 .get(0)。 api.jquery.com/eq
@Michael Beeson 嗨，感谢您的回复...我尝试了您的建议，但没有奏效。
它确实有效。只需在 .load() 函数之前和 .show() 函数之前添加 .eq(0)
@MichaelBeeson 我也试过了，但这就是我得到的awesomescreenshot.com/image/3676646/…
恐怕我对jsFiddle不是很熟悉。似乎在您第一次加载页面时会出现问题，但是如果您单击“运行”，它的行为会如预期的那样。如果您只是尝试在服务器上运行此代码会发生什么？

标签： javascript jquery

【解决方案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');
  });
}

【讨论】：