使用bootstrap实现多窗口和拖动效果

发布时间：2020-12-18 00:49:26 所属栏目：安全来源：网络整理

导读：有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！这里，我们不使用静态打开的的方式，low...,1、添加一个a链接触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4

有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！

这里，我们不使用静态打开的的方式，low...,1、添加一个a链接触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal,调用dragModal(new Array('modalId1','modalId2'));

1、添加一个a链接触发，打开按钮：

2、编写动态打开js脚本：

//禁止选择文字，在拖动时会有影响
$('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;}

强制停止正常处理

<div class="modal-footer">
<span class="loading">
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭

4、添加拖动效果：

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',function (event) {
clicked = event.data.index + 1;

});
$('#' + obj[i]).on('hide.bs.modal',function () { //关闭时打开选中
$('html').off('selectstart').on('selectstart',function () {
return true;

});
});

}

5、打开多个modal,'modalId2'));

整个过程即是如此，有需要的，就参考参考吧！

如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!