Bootstrap弹窗点击表单元素自动关闭问题排查与修复求助

你碰到的弹窗点击内部控件就关闭的问题，核心原因是Bootstrap模态框被嵌套在了触发它的元素内部。

看你的代码，id="searchresp"的模态框代码直接放在了带data-toggle="modal"属性的.search_resp容器里。Bootstrap的模态框触发逻辑依赖事件委托，当点击模态框内的select、input或按钮时，事件会向上冒泡到触发元素，触发模态框的toggle动作，导致弹窗被关闭。

唯一需要做的就是把模态框的代码完全移出触发它的.search_resp容器，将其放在页面的独立位置（比如直接作为<body>的子元素，或者和触发元素同级的容器中）。

修改后的代码结构示例：

<!-- 触发模态框的容器 -->
<div class="col-sm-12 col-xs-12 search_resp" data-toggle="modal" data-target="#searchresp" 
     style="border: none; box-shadow: 0 0 5px grey; height: 80px; border-radius: 30px; margin: 40px auto; background: white;">
  <div style="display: flex; width: 100%; padding: 0px 15%;">
    <div style="width: 55px; padding: 10px 0px;">
      <img src="img/more.png" style="height: 55px;width: 55px;filter: brightness(1.3);">
    </div>
    <div style="padding: 25px 0px; text-align: center; width: 100%;">
      <h2>
        <span class="toggle-search-button" style="color: #13216e;">Search Filters</span>
      </h2>
    </div>
  </div> 
</div>

<!-- 模态框移到触发元素外部 -->
<div class="modal fade" id="searchresp" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog" role="document" style="width: 100%; margin: 30px auto;">
    <!-- Modal content-->
    <div class="modal-content" style="border-radius: 20px; box-shadow: 0 0 10px darkslategray;">
      <div class="modal-header" style="display: block; border-bottom: none;">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body" style="margin-top: -20px;">
        <div class="row mt-10-resp">
          <!-- Property For -->
          <div class="feilds_width ml-0">
            <fieldset class="form-group">
              <select class="selectpicker form-control bg-clr-w r_mrgn" 
                      id="property_for" name="property_for" 
                      onchange="popup_fun(this.value); change_search_btn_res('p_for', this.value)" required>
                <option value="" disabled>Property For</option>
                <option value="Sale" selected>Sale</option>
                <option value="Rent">Rent</option>
                <option value="Projects">Projects</option>
              </select>
            </fieldset>
          </div>

          <!-- Country -->
          <div class="feilds_width">
            <fieldset class="form-group">
              <select class="selectpicker form-control bg-clr-w r_mrgn" id="country" 
                      name="country" size="auto" data-live-search="true" 
                      onchange="change_search_btn_res('country', this.value)">
                <option value="">Country</option>
                <?php
                $countries = $db->get('countries',null,'country_name');
                foreach($countries as $key) {
                ?>
                <option value="<?php echo $key['country_name']; ?>" <?php if($key['country_name'] == $user_country) echo 'selected'; ?>><?php echo $key['country_name']; ?></option>
                <?php } ?>
              </select>
            </fieldset>
          </div>

          <!-- City -->
          <div class="feilds_width">
            <fieldset class="form-group">
              <div class="form-group label-floating fl-title city_field">
                <label class="control-label">City</label>
                <input type="text" class="form-control list-city-field border-radius-0" id="city" name="city" 
                       onkeyup="change_search_btn_res('city', this.value)">
              </div>
            </fieldset>
          </div>

          <!-- Other Filters -->
          <div class="feilds_width form-group">
            <a href="javascript:void(0)" class="btn btn-md list-filter-btn border-radius-0" data-toggle="modal" data-target="#filter_modal" data-placement="top">Other Filters</a>
          </div>
        </div> 
      </div>
      <div class="modal-footer" style="border-top: none;">
        <!-- Search Button -->
        <div class="feilds_width form-group">
          <button class="btn btn-md list-search-btn list-search-empty-btn br-0" 
                  type="button" id="search_btn_res" name="search_btn"                        
                  onclick="get_result_res('get_list_property_project_data.php')">Search</button>
        </div>
      </div>
    </div>
  </div>
</div>

如果调整结构后问题依然存在，可以排查：

• 是否有自定义JS代码绑定了弹窗内部元素的点击事件，意外调用了modal('hide')方法
• 是否引入了多个版本的Bootstrap JS，导致功能冲突

内容的提问来源于stack exchange，提问作者nomi