Bootstrap实现带动画过渡的弹出框
更新时间：2016年08月09日 15:13:26 作者：smartbetter
这篇文章主要为大家详细介绍了Bootstrap实现带动画过渡的弹出框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
先看看效果图：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>带动画过的渡弹出框</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!--css样式-->
<style >
body{margin:30px;padding:30px;}
</style>
</head>
<body>
<button class="btn btn-primary" type="button">点击我</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">弹出窗标题</h4>
</div>
<div class="modal-body">
<p>弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 放置在文档的结尾，使页面加载速度更快 -->
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
</script>
</body>
</html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了js实现贪吃蛇游戏简易版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
模拟弹出窗口效果，关闭层之前，不能选择后面的页内容...2007-02-02
这篇文章主要介绍了JS什么场景不适合箭头函数，对箭头函数感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了ie7+背景透明文字不透明超级简单的实现方法，有需要的朋友可以参考一下2014-01-01
这篇文章主要介绍了javascript操作表格排序,涉及javascript数组排序与表格操作的相关技巧,需要的朋友可以参考下2015-05-05
本篇文章我们从面包屑导航的样式，面包屑导航的代码等方面详细给大家分析了它的作用和设计技巧，如果你有这方便的需要，学习参考下吧。2017-12-12
这篇文章主要介绍了Javascript原型链及instanceof原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了electron 引入node服务的操作方法,引入node服务很简单,直接在electron的主体中引入就可以了,对electron 引入node服务感兴趣的朋友一起看看吧2024-03-03
出现“不能执行已释放的Script代码”错误的原因及解决办法
出现“不能执行已释放的Script代码”错误的原因及解决办法...2007-08-08
在Electron开发过程中,每次代码修改后需手动重新启动应用,这一过程可以通过引入Nodemon工具自动化,Nodemon能够监测文件变化并自动重启服务器,本文给大家介绍Electron 使用 Nodemon 配置自动重启,感兴趣的朋友一起看看吧2024-09-09
最新评论