如何使用javascript关闭bootstrap div
要使用JavaScript关闭Bootstrap的div，你可以使用jQuery库来简化DOM操作。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Close Bootstrap Div</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="myDiv" class="alert alert-success" role="alert">
This is a Bootstrap div.
</div>
<button id="closeBtn" class="btn btn-danger">Close Div</button>
</div>
<script>
$(document).ready(function() {
$('#closeBtn').click(function() {
$('#myDiv').alert('close');
});
});
</script>
</body>
</html>解释
- HTML部分:
- 引入了Bootstrap的CSS和JS文件，以及jQuery库。
- 创建了一个带有
alert alert-success类的div，和一个按钮用于关闭这个div。
- JavaScript部分:
- 使用jQuery的
$(document).ready()方法确保DOM完全加载后再执行脚本。 - 给按钮添加点击事件，当按钮被点击时，调用Bootstrap的
alert('close')方法关闭指定的div。
- 使用jQuery的
参考链接
通过这种方式，你可以轻松地使用JavaScript关闭Bootstrap的div。
相关·内容
我有下面的引导div，我想通过javascript来关闭它，能做到吗？<div class="alert alert-success alert-dismissable"> <h4><i class="
浏览 47提问于2020-02-03得票数 1
回答已采纳
我有下面的例子来说明我是如何尝试使用引导崩溃javascript特性的。
即使当打开不同的div时，所有其他div都关闭，第6个div仍保持打开状态。我使用托管的bootstrap.min.js和bootstrap.min.css文件作为资源。这是bootstrap-cliumse.js实现中的已知bug，还是我忽略了标记中的错误？
浏览 0提问于2012-09-10得票数 0
回答已采纳
我需要关闭Popover (使用Bootstra4.21)时，点击外部它。我已经找到了一些例子，但是我使用了不同的方法-- popover链接到外部元素，而不是在单击的元素上。<!/js/bootstrap.bundle.min.js"></script><body>
<a href="javascript:void(0)" onclic
浏览 1提问于2019-01-19得票数 0
回答已采纳
1回答
" type="text/css"/><script type="text/javascript" src="js/bootstrap.min.js"></script>
浏览 0提问于2018-10-15得票数 0
2回答
我有一个包含几个Bootstrap模式的html页面。我想用jquery关闭它们。但是，我在选择它们时遇到了麻烦。这是html的一个示例： <input class="btn btn-primary" name="commit" type="submit" value="Save Material">
</div&g
浏览 0提问于2013-01-23得票数 0
回答已采纳
我使用的是bootstrap datetimepicker ()。 <asp:TextBox ID="date2" class="form-control" runat="server"
onfocus="
浏览 1提问于2017-01-07得票数 3
回答已采纳
Bootstrap模式在bootstrap版本4上工作得很好，但当我更改为使用bootstrap版本5时，当我单击“关闭”按钮时，模式无法关闭。//当我使用此v4时，modal可以完美地工作： <script src="assets/vendor/bootstrap-4.1.3-dist/js/bootstrap.min.js"><&#x
浏览 16提问于2021-09-29得票数 0
5回答
引导模式未触发
、、
我正在尝试创建一个Bootstrap模式作为我的项目的需求，问题是我无法使用jQuery触发此模式<div class="container"> <div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog
浏览 4提问于2016-10-13得票数 1
1回答
我在我的asp.net项目中使用引导模式，我的代码是<div class="modal-header"><h3>Modal header</h3>
</div&g
浏览 0提问于2013-04-30得票数 0
当有人点击X图标时，我正试图关闭一个引导带4弹出。-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/boots
浏览 1提问于2019-05-14得票数 0
回答已采纳
4回答
我有一个模式框，我可以称之为on，但我不能关闭它，不管你是点击x还是屏幕上的其他任何地方。如果我描述得不够好，很抱歉--我是个新手。我已经尝试过w3学校的演示和其他s/o示例，但我无论如何也找不出我做错了什么。完整的代码提供了下面的要求。 <!> <div class="container">
<h1>Benny the Blob</h1&
浏览 20提问于2019-07-03得票数 0
我不熟悉使用bootstrap Modal的javascript，但我不知道如何在按下关闭按钮或关闭图标时停止我的youtube视频。<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog&q
浏览 0提问于2016-11-10得票数 1
当我用数据打开模式并关闭它并再次打开时， form 没有reset，并显示旧的数据如何修复，如何初始化表单数据？我使用引导v3.3.7和adminlte v2<div class="modal fade" id="new" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg"
浏览 0提问于2019-05-02得票数 0
回答已采纳
我有一个非常简单的JavaScript操作，但它不起作用。我正在使用twitter-bootstrap CSS，并试图实现关闭消息框的关闭。我的代码在这里：
<div class = "alert-message success" id = "message_1"><
浏览 0提问于2011-09-06得票数 1
回答已采纳
2回答
引导模式将不会出现
、、、
我不知道该如何解决这个问题，当我点击按钮时，什么都不会发生。code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sh
浏览 2提问于2021-10-29得票数 0
回答已采纳
我正在尝试实现的是一个在bootstrap的.container中的DIV，它跨越容器的右侧(直到它出现在屏幕上)的全宽，但在容器的左边。示例代码： <div class="extended-div"></div>我只想让扩展的-div位于容器元素的左侧，并从那里一直延伸到屏幕的
浏览 0提问于2016-04-16得票数 0
我试图关闭/隐藏bootstrap5模式，使用JavaScript的角度，问题是引导中的隐藏函数在某种程度上不起作用，所以我想要做的是点击一个有数据的按钮--bs-close，如果我手动点击它，它就会工作，但是如果我尝试通过JavaScript来实现它，它就不能工作。// notwoking
new window.bootstrap.Modal(document.getElementById('modalId')).hide(); &#x
浏览 0提问于2021-05-29得票数 1
我想知道如何不使用jquery或boostrap而使用javscript来创建一个模式弹出窗口。模式弹出应该只显示在页面加载30秒，并自动关闭。我尝试过使用jquery和bootstrap，但需要在javascript中创建 $(document).ready(function () {
浏览 3提问于2019-03-19得票数 0
下拉列表一直在关闭。我在标题中包含了bootstrap.js、bootstrap.css和bootstrap-responsive.css。怎样才能让这个下拉列表不关闭呢？<script type='text/javascript'>//<!) {
$("#medr" + div).css("di
浏览 4提问于2012-11-23得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
