我创建了一个搜索框,该搜索框以“模态”链接打开。
我的网站位于Drupal 8和Bootstrap 3.3.7
问题在于,当显示模式时,它会自动关闭。为什么?
这是我的代码块:
<div{{ attributes }}>
<div class="modal-search-link">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="modal" data-target="#modal-search">
<i class="fas fa-search fa-lg"></i>
<span class="caret"></span>
</button>
</div>
<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lancer une recherche</h4>
</div>
<div class="modal-body">
{{ content }}
</div>
</div>
</div>
</div>
</div>
这是我的代码JS,用于关闭模式开头的菜单:
$('#block-formulaireexposerecherchepage-1').on('click', function () {
$('#navbar-collapse-first').collapse('hide');
});
您必须单击左上角的菜单和放大镜才能打开带有搜索块的模态窗口。
答案 0 :(得分:1)
您隐藏的div navbar-collapse-first是您打开的模态的父级,因此模态也与其父级一起隐藏
从div navbar-collapse-first中取出这部分模式代码
<div class="modal fade" id="modal-search" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lancer une recherche</h4>
</div>
<div class="modal-body">
{{ content }}
</div>
</div>
</div>