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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
Vue实现简单的拖拽效果
Aug 25 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
咖啡的种类和口感
2021/03/03 新手入门
php 静态化实现代码
2009/03/20 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jquery 元素相对定位代码
2010/10/15 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
中专毕业生的自我鉴定
2013/12/01 职场文书
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
安全生产实施方案
2014/02/23 职场文书
西式结婚主持词
2014/03/14 职场文书
春节晚会主持词
2014/03/24 职场文书
公开承诺书格式
2014/05/21 职场文书
治安消防安全责任书
2014/07/23 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书