javascript - 为什么我的模态窗口会自动打开和关闭?
问题描述
我创建了一个以模态链接打开的搜索块。
我的网站位于 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');
});
您必须单击左上角的菜单和放大镜才能打开带有搜索块的模式窗口。
解决方案
你隐藏了这个 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>
推荐阅读
- java - 为什么我不能从 VideoView 播放我的视频?
- database - openlayers 中的 WFS 层未显示在数据库中
- javascript - SCSS 脚本构建
- java - Mockito when...return 在 setUp 方法中的子句
- azure - Azure devops 管道任务错误:Measure-Command 调用失败
- reactjs - 如何在打字稿中编写带有参数化道具和前向引用的 React 组件
- php - 不正确的整数值:laravel 7 中第 1 行的列的“[]”
- asp.net-mvc - 如何在每列后添加新行以输出 api mvc 控制器代码?
- javascript - 如果我有一个 React 前端和一个微服务后端,我可以有两个部署目标(S3 用于前端,EKS 用于后端)吗?
- html - CSS:绝对位置的表格溢出问题