Bootstrap实现带动画过渡的弹出框


Posted in Javascript onAugust 09, 2016

先看看效果图:

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个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
Oct 23 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 #Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 #Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 #Javascript
jQuery实现产品对比功能附源码下载
Aug 09 #Javascript
AngularJS利用Controller完成URL跳转
Aug 09 #Javascript
JavaScript实现广告弹窗效果
Aug 09 #Javascript
谈谈JavaScript中的几种借用方法
Aug 09 #Javascript
You might like
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
初识Laravel
2014/10/30 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
浅析PHP开发规范
2018/02/05 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python实现祝福弹窗效果
2019/04/07 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
创意婚礼策划方案
2014/05/18 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
黄河绝恋观后感
2015/06/08 职场文书
运动会广播稿20字
2015/08/19 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
JavaScript 数组去重详解
2021/09/15 Javascript
详解在OpenCV中如何使用图像像素
2022/03/03 Python