有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！
这里，我们不使用静态打开的的方式，low...,1、添加一个a链接 触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));
1、添加一个a链接 触发，打开按钮：
打开modal
2、编写动态打开js脚本：
//打开弹窗
$('.open-modal-dynamic').on('click', function(){
var modalId = $(this).attr('divid') ? $(this).attr('divid') : 'Modal', url = $(this).attr('url');
$.get(url, function(data){
if(data.status == 1){
//禁止选择文字，在拖动时会有影响
$('html').off('selectstart').on('selectstart', function(){return false;});
$('#' + modalId).html(data.htmlData);
$('#' + modalId).modal({'show':true});
}else{
alert(data.info);
}
}, 'json');
3、编写modal中间内容：
.line{margin-bottom: 5px;}
.line .left{width: 100px;text-align:right;display:block;}
.form-button{padding:2px 10px;background:#73A86A;color:#ffffff;border:none;}
.form-button:hover{background:#146206;}
×
modal window
脚本名称：
11
22
日期：
是否停止：
强制停止
正常处理
执行情况：
11
22成
223行
445
55失败
操作说明：
$(function(){
$('#submit2').off().on('click', function(){
var status = $('input[name=status_add]:checked').val(),
memo = $('#memo').val(),
id = parseInt($('#id_add').val()),
is_del = $('input[name=del_add]:checked').val(),
cron_name = $('#name_add').val(),
cron_date = $('#date_add').val(),
url ='index.php?m=xx&c=xx&a=';
if(!memo){
alert('请填写操作备注，如不处理，请直接关闭对话框！');
return false;
}
$.post(url, {status: status, cron_name:cron_name, memo: memo, id: id, cron_date: cron_date, is_del: is_del}, function(data){
if(data.status == 1){
alert(data.info);
window.location.reload();
}else{
alert(data.info);
}
}, 'json')
});
});
// drag effects begin, define the global variables to receive the changes,because of the different function of the modal
dragModal('editModal');
4、添加拖动效果：
var clicked = "0";
var dif = {};
;function dragModal(obj) {
if(clicked == undefined || obj == undefined || dif == undefined){
return false;
}
if(typeof obj == 'string')
{
obj = new Array(obj);
}
var modalNums = obj.length;
//drag effects begin
var i = 0;
for (i = 0; i < modalNums; i++) {
dif[obj[i]] = {'difx': 0, 'dify': 0};
}
$("html").off('mousemove').on('mousemove', function (event) {
if (clicked == "0") {
for (i = 0; i < modalNums; i++) {
dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left;
dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top;
}
}
if (clicked > 0 && clicked <= modalNums) {
var clickedObj = obj[clicked - 1];
var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px', '');
var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px', '');
$("#" + clickedObj).css({top: newy, left: newx});
}
});
$("html").off('mouseup').on('mouseup', function (event) {
clicked = "0";
});
for(i = 0; i < modalNums; i++){
//注重此处不能直接传入i值，此处即为添加多窗口时的效果使用
$("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i}, function (event) {
clicked = event.data.index + 1;
});
$("#" + obj[i] + " .modal-footer").off().on('mousedown', {index: i}, function (event) {
clicked = event.data.index + 1;
});
$('#' + obj[i]).on('hide.bs.modal', function () { //关闭时打开选中
$('html').off('selectstart').on('selectstart', function () {
return true;
});
});
}
}
5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));
整个过程即是如此，有需要的，就参考参考吧！
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉 本文系统来源：php中文网
