有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!
这里,我们不使用静态打开的的方式,low...,1、添加一个a链接 触发,打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal,调用dragModal(new Array('modalId1','modalId2'));
2、编写动态打开js脚本:
//禁止选择文字,在拖动时会有影响
$('html').off('selectstart').on('selectstart',function(){return false;});
$('#' + modalId).html(data.htmlData);
$('#' + modalId).modal({'show':true});
}else{
alert(data.info);
$('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
modal window
名称:
<div class="line">
<span class="left">日期:
<span style="word-break:break-all;" title="的时间">
<div class="line">
操作说明:
<textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;>
<div class="line" style="text-align:center;">