使用bootstrap实现多窗口和拖动效果
有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！
这里，我们不使用静态打开的的方式，low...,1、添加一个a链接触发，打开按钮;2、编写动态打开js脚本;3、编写modal中间内容;4、添加拖动效果;5、打开多个modal,调用dragModal(newArray('modalId1','modalId2'));
1、添加一个a链接触发，打开按钮：
<ahref="javascript:;"title="开关"class="open-modal-dynamic"url="index.php?m=index&c=cc&a=aa&id=22"alert='1'divid="editModal">打开modal<a> <divid="addModal"class="modalhidefade"style="max-width:800px;"data-backdrop="static"></div><!--打开容器-->
2、编写动态打开js脚本：
//打开弹窗
$('.open-modal-dynamic').on('click',function(){
varmodalId=$(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(){returnfalse;});
$('#'+modalId).html(data.htmlData);
$('#'+modalId).modal({'show':true});
}else{
alert(data.info);
}
},'json');
3、编写modal中间内容：
<style>
.line{margin-bottom:5px;}
.line.left{width:100px;text-align:right;display:block;}
.form-button{padding:2px10px;background:#73A86A;color:#ffffff;border:none;}
.form-button:hover{background:#146206;}
</style>
<divclass="modal-header">
<aclass="close"title="关闭小窗口"data-dismiss="modal">×</a>
<h3>modalwindow<h3>
</div>
<divclass="modal-body"style="padding-bottom:5px;">
<divclass="line">
<spanclass="left">脚本名称：</span>
<span>
<selectname="name">
<optionvalue='11'>11</option>
<optionvalue='22'>22</option>
</select>
</span>
</div>
<divclass="line">
<spanclass="left">日期：</span>
<spanstyle="word-break:break-all;"title="的时间">
<inputclass="Wdateiptdate-picker"style="width:100px;margin:0;"type="text"id="date_add"value=""/>
</span>
</div>
<divclass="line"title="设置">
<spanclass="left">是否停止：</span>
<span>
<label><inputtype="radio"name="is_del_add"value="1"/>强制停止</label>
<label><inputtype="radio"name="is_del_add"value="0"/>正常处理</label>
</span>
</div>
<divclass="line"title="按照实际情况允许进行模拟更改">
<spanclass="left">执行情况：</span>
<span>
<label><inputtype="radio"name="status_add"value="5"onclick="javascript:returnconfirm('你确定要操作该状态吗，这是系统的操作，请确认？');"/>11</label>
<label><inputtype="radio"name="status_add"value="1"onclick="javascript:returnconfirm('你确定要操作该状态吗，这是系统的操作，请确认？');"/>22成</label>
<label><inputtype="radio"onclick="javascript:returnconfirm('你确定要操作该状态吗，这是系统的操作，请确认？');"name="status_add"value="2"/>223行</label>
<label><inputtype="radio"onclick="javascript:returnconfirm('你确定要操作该状态吗，这是系统的操作，请确认？');"name="status_add"value="0"/>445</label>
<label><inputtype="radio"onclick="javascript:returnconfirm('你确定要操作该状态吗，这是系统的操作，请确认？');"name="status_add"value="4"/>55失败</label>
</span>
</div>
<divclass="line">
<span>操作说明：</span>
<textareaname="memo"id="memo"cols="100"rows="1"style="width:370px;></textarea>
</div>
<divclass="line"style="text-align:center;">
<inputtype="button"value="提交"class="form-button"id="submit2"/>
<inputtype="hidden"id="id_add"value="22"/>
</div>
</div>
<divclass="modal-footer">
<spanclass="loading"></span>
<buttonclass="btn"data-dismiss="modal"aria-hidden="true">关闭</button>
</div>
<scriptsrc="/js/dragModal.js"></script>
<script>
$(function(){
$('#submit2').off().on('click',function(){
varstatus=$('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('请填写操作备注，如不处理，请直接关闭对话框！');
returnfalse;
}
$.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')
});
});
//drageffectsbegin,definetheglobalvariablestoreceivethechanges,becauseofthedifferentfunctionofthemodal
dragModal('editModal');
</script>
4、添加拖动效果：
varclicked="0";
vardif={};
;functiondragModal(obj){
if(clicked==undefined||obj==undefined||dif==undefined){
returnfalse;
}
if(typeofobj=='string')
{
obj=newArray(obj);
}
varmodalNums=obj.length;
//drageffectsbegin
vari=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){
varclickedObj=obj[clicked-1];
varnewx=event.pageX-dif[clickedObj].difx-$("#"+clickedObj).css("marginLeft").replace('px','');
varnewy=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(){
returntrue;
});
});
}
}
5、打开多个modal,调用dragModal(newArray('modalId1','modalId2'));
整个过程即是如此，有需要的，就参考参考吧！
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。