bootstrap实现弹窗和拖动效果

网友投稿 251 2023-07-23


bootstrap实现弹窗和拖动效果

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用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中间内容:

脚本名称:

日期:

是否停止:

执行情况:

操作说明:

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实战教程


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:导致MyEclipse内存不足的原因分析及解决办法
下一篇:java Hibernate save()与persist()区别
相关文章

 发表评论

暂时没有评论,来抢沙发吧~