<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>弹出框插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
a:focus{
outline: none;
}
#view {
width: 300px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body style="margin: 200px;">
<div id="view">
<button class="btn btn-danger btn-lg" id="b"
data-toggle="popover"
title="Bootstrap"
data-content="Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。"
data-placement="right"
>
点击弹出/隐藏弹出框
</button>
</div>
<button id="btn">按钮</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#b').popover({
viewport : {
selector : '#view',
padding : 10,
}
});
$('#btn').on('click', function () {
$('#b').popover('toggle');
});
$('#b').on('show.bs.popover', function () {
alert('show');
});
$('#b').on('hide.bs.popover', function () {
alert('hide');
});
</script>
</body>
</html>
效果图：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>警告插件</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
a:focus{
outline: none;
}
</style>
</head>
<body style="margin: 200px;">
<!-- <div class="alert alert-warning fade in">
<button class="close" data-dismiss="alert">
<span>×</span>
</button>
<p>警告：您的浏览器不支持！</p>
</div> -->
<div id="alert" class="alert alert-warning fade in">
<button class="close">
<span>×</span>
</button>
<p>警告：您的浏览器不支持！</p>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$('.close').on('click', function () {
$('#alert').alert('close');
});
$('#alert').on('close.bs.alert', function () {
alert('close');
});
</script>
</body>
</html>
效果图：
相关推荐
前言：对于Web开发人员，弹出框和提示框的使用肯定不会陌生，比如常见的表格新增和编辑功能，一般常见的主要有两种处理方式：行内编辑和弹出框编辑。在增加用户体验方面，弹出框和提示框起着重要的作用，如果你的...
PopConfirm是一款基于bootstrap的jquery弹出层确认框插件。该jquery弹出层确认框插件兼容bootstrap2和bootstrap3。它能够使用bootstrap Popover来替代确认框功能，非常方便。
webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合，但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。
Bootstrap弹出框
bootstrap的toast消息框插件，弹出特效，前端用例，bootstrap 插件
Bootstrap 弹出框（Popover）插件 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap ...
Bootstrap响应式模态登录框插件，jQuery基于Bootstrap制作的一款响应式模态登录框插件，点击遮罩弹出登录窗口代码。
可拖拽的bootstrap弹出窗口结合jquery-ui实现的弹出和拖拽效果。
Bootstrap点击弹出层用户登录窗口模板基于Bootstrap3.3.5制作，简单实用。
Bootstrap弹出框插件，提供了一个扩展的视图，弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。 弹出框（Popover）与工具提示（Tooltip）类似，提供了一个...
Bootstrap弹出框水平居中，垂直居中
jQuery+bootstrap点击弹出式登录框插件是一款非常简洁的模态登录框，而且是响应式的，可以自适应手机端。
bootstrap 多选弹出层插件 ，简单，可拓展，本人并不是做前端开发的，所有有些样式需要各位自行调整。
好用的 js,bootstrap 城市弹出框
基于jQuery和Bootstrap的弹出框，替代使用浏览器弹出的警告框，优化后弹出框样式。
15种bootstrap模态框动画弹出特效 兼容性好 bootstrap
bootstrap模态框弹出效果是一款15种模态框弹出效果代码。
ModalLayer是一款带多种形式的模态框插件，js网页弹出框代码，支持倒计时、确认对话框、弹窗iframe等。
主要为大家详细介绍了Bootstrap实现弹出框和提示框效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下