看过bootstrap的模态框之后觉
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&测试页面&/title&
&!-- 新 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"&
&link rel="stylesheet" href="/ajax/libs/animate.css/3.5.2/animate.min.css"&
.test-btn{
margin:50px 100px;
&!-- jQuery文件。务必在bootstrap.min.js 之前引入 --&
&script src="/jquery/1.11.1/jquery.min.js"&&/script&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="/bootstrap/3.3.0/js/bootstrap.min.js"&&/script&
//animate.css动画触动一次方法
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
* 显示模态框方法
* @param targetModel 模态框选择器，jquery选择器
* @param animateName 弹出动作
* @ callback 回调方法
var modalShow = function(targetModel, animateName, callback){
var animationIn = ["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp",
"fadeIn", "fadeInDown", "fadeInLeft", "fadeInRight", "fadeOutUp",
"fadeInDownBig", "fadeInLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipInX","flipInY",
"lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight",
"zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft",
"slideInRight", "slideInUp","rollIn"];
if(!animateName || animationIn.indexOf(animateName)==-<span style="background-color: #f5f5f5; color: #){
console.log(animationIn.length);
var intRandom =
Math.floor(Math.random()*animationIn.length);
animateName = animationIn[intRandom];
console.log(targetModel + " " + animateName);
$(targetModel).show().animateCss(animateName);
callback.call(this);
* 隐藏模态框方法
* @param targetModel 模态框选择器，jquery选择器
* @param animateName 隐藏动作
* @ callback 回调方法
var modalHide = function(targetModel, animateName, callback){
var animationOut = ["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp",
"fadeOut", "fadeOutDown", "fadeOutLeft", "fadeOutRight", "fadeOutUp",
"fadeOutDownBig", "fadeOutLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipOutX","flipOutY",
"lightSpeedOut","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight",
"zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp",
"zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideOutDown","slideOutLeft",
"slideOutRight", "slideOutUp","rollOut"];
if(!animateName || animationOut.indexOf(animateName)==-<span style="background-color: #f5f5f5; color: #){
console.log(animationOut.length);
var intRandom =
Math.floor(Math.random()*animationOut.length);
animateName = animationOut[intRandom];
$(targetModel).children().click(function(e){e.stopPropagation()});
$(targetModel).animateCss(animateName);
$(targetModel).delay(<span style="background-color: #f5f5f5; color: #0).hide(<span style="background-color: #f5f5f5; color: #,function(){
$(this).removeClass('animated ' + animateName);
callback.call(this);
var modalDataInit = function(info){
alert(info);
//填充数据，对弹出模态框数据样式初始化或修改
&button type="button" class="btn btn-primary
test-btn" onclick="modalShow('#bigModal', '', modalDataInit('test'));"&模态框测试&/button&
&div class="modal bs-example-modal-lg"
onclick="modalHide('#bigModal', '');" id="bigModal"&
&div class="modal-dialog modal-lg"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" onclick="modalHide('#bigModal', '');" class="close" data-dismiss="modal"&&span aria-hidden="true"&×&/span&&span
class="sr-only"&Close&/span&&/button&
&h4 class="modal-title"&模态框标题&/h4&
&div class="modal-body"&
&pre class="text-left"&
modalShow('#bigModal', '', modalDataInit('test'));
animateName可为空，或填写对应的animateIn或者animateOut数组中的对应参数
animationIn = ["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp",
"fadeIn", "fadeInDown", "fadeInLeft", "fadeInRight", "fadeOutUp",
"fadeInDownBig", "fadeInLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipInX","flipInY",
"lightSpeedIn","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight",
"zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","slideInDown","slideInLeft",
"slideInRight", "slideInUp","rollIn"];
animationOut = ["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp",
"fadeOut", "fadeOutDown", "fadeOutLeft", "fadeOutRight", "fadeOutUp",
"fadeOutDownBig", "fadeOutLeftBig", "fadeOutRightBig", "fadeOutUpBig","flipOutX","flipOutY",
"lightSpeedOut","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight",
"zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp",
"zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideOutDown","slideOutLeft",
"slideOutRight", "slideOutUp","rollOut"];
得很好用，但是个人觉得不太符合个人使用习惯，就加以修改
阅读(...) 评论() &请自行下载使用到的Bootstrap库及jQuery库
&!DOCTYPE html&
&head lang="en"&
&meta charset="UTF-8"&
&title&&/title&
&link href="bootstrap.min.css" media="screen" rel="stylesheet"&
&!-- Button trigger modal --&
&button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&
打开示例对话框
&!-- Modal --&
class="modal fade"
id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&
&div id="modalDialog" class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="myModalLabel"&可拖动窗口&/h4&
&div class="modal-body"&
按住左键开始拖动吧
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&script src="jquery-1.11.2.min.js"&&/script&
&script src="jquery-ui.min.js"&&/script&&!--用户拖动元素，链接：/draggable/#method-disable/--&
&script src="jquery.ui.touch-punch.min.js"&&/script&&!--移动设备用户拖动元素，依赖juery-ui.min.js，链接：/--&
&script src="bootstrap.min.js"&&/script&
$(document).ready(function(){
$("#modalDialog").draggable();//为模态对话框添加拖拽
$("#myModal").css("overflow", "hidden");//禁止模态对话框的半透明背景滚动
如果您想留下此文，您可以将其发送至您的邮箱(将同时以邮件内容&PDF形式发送)
相关文章推荐
(Ctrl+Enter提交) &&
已有0人在此发表见解
&在& 16:06收藏到了
&&在信息爆炸的时代，您的知识需要整理，沉淀，积累！Lai18为您提供一个简单实用的文章整理收藏工具，在这里您可以收藏对您有用的技术文章，自由分门别类，在整理的过程中，用心梳理自己的知识！相信，用不了多久，您收藏整理的文章将是您一生的知识宝库！
· 蜀ICP备号-1匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。