Question

我有一个Bootstrap 3模式，当我用“关闭”按钮关闭它时，它将关闭并将我的页面返回到正确的状态（显示垂直滚动条）。或者＆＃39; x＆＃39;在右上角。但是，当我尝试使用＆＃34;选择按钮时＃34;在模态中关闭它后，在进行ajax调用后，垂直滚动条不会返回到页面。在代码中我有＆＃39; onclick＆＃39;事件调用.modal（＆＃39; hide＆＃39;）以及：data-dismiss =＆＃34; modal＆＃34;在按钮本身。 ajax调用也正确执行。我无法理解为什么这会阻止滚动条以与选择其中一个关闭按钮时相同的方式重新出现。

- 感谢您的见解。

<div class="modal fade" id="modal_1timepmt" tabindex="-1" role="dialog" aria-labelledby="1timepmtLabel" aria-hidden="true">
<div class="modal-dialog admin_modal_dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Some Other Details</h4>
    </div>
    <div class="modal-body">
      <div class="container content-box live-box">
        <h3>Some Heading Here</h3>
        <form id="date_exp" name="date_exp">
            <div class="form-group" id="exp_form">
                <label for="log_start" class="control-label"><small>Date</small></label>
                <input type="date" class="form-control input-sm" name="exp_date" id="exp_date" data-format="yyyy-mm-dd" >
                <a href="/?object=result_detail&action=exp_date" onclick="priv_ajax.go({
                    url:this.href,
                    div:'web_adm_details',
                    data:priv_forms.capture(document.forms['date_exp'])
                }); return false; $('#modal_1timepmt').modal('hide');" >
                 <button style="margin-left: 10px; margin-top: 10px;"  class="btn btn-default btn-xs" data-dismiss="modal">Select</button></a>
            </div>
        </form> 
         </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

Answer 1

帮助其他可能遇到此问题的人。在模态关闭后进一步检查DOM时，我注意到身体仍然应用了这个类：“。modal-open”。

删除此类会使页面恢复正常状态。附加到onclick事件的以下简单代码解决了这个问题（尽管我还没有弄清楚根本原因）。

$('body').removeClass('modal-open');

Answer 2

我认为最好为所有打开的模态制作新的css类。所以制作CSS类

.modal.fade.in {overflow-x:hidden; overflow-y:auto;}

这将解决所有模态的问题。

PS：我有一个问题，我从模态打开模态后，第二个模态太长，我无法滚动（因为javascript注册data-dismiss="modal"所以他忘了记得我也叫data-toggle="modal"对于另一个，所以它从文档的正文中删除了class="modal-open"。用于

的bootstrap CSS样式

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

我对javascript不是很好，所以很遗憾无法在java中以某种方式更好地解决这个问题。：）

Answer 3

可能是模态弹出窗口未正确关闭。

隐藏模态弹出窗口的代码

$("#ModalId").modal("hide");

模态关闭，但滚动条不会返回

3 个答案: