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


Posted in Javascript onSeptember 22, 2016

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

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

1、添加一个a链接 触发,打开按钮:

<a href="javascript:;" title="开关" class="open-modal-dynamic" url="index.php?m=index&c=cc&a=aa&id=22" alert='1' divid="editModal">打开modal<a>
<div id="addModal" class="modal hide fade" style="max-width:800px;" data-backdrop="static"></div> <!-- 打开容器 -->

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中间内容: 

<style>
 .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;}
</style>
<div class="modal-header">
 <a class="close" title="关闭小窗口" data-dismiss="modal">×</a>
 <h3>modal window<h3>
</div>
<div class="modal-body" style="padding-bottom: 5px;">
 <div class="line">
 <span class="left">脚本名称:</span>
 <span>
 <select name="name">
 <option value='11'>11</option>
 <option value='22'>22</option>
 </select>
 </span>
 </div>

 <div class="line">
 <span class="left">日期:</span>
 <span style="word-break:break-all;" title="的时间">
 <input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />
 </span>
 </div>
 <div class="line" title="设置">
 <span class="left">是否停止:</span>
 <span>
 <label><input type="radio" name="is_del_add" value="1" />强制停止</label>
 <label><input type="radio" name="is_del_add" value="0" />正常处理</label>
 </span>
 </div>
 <div class="line" title="按照实际情况允许进行模拟更改">
 <span class="left">执行情况:</span>
 <span>
 <label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />11</label>
 <label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />22成</label>
 <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="2"/>223行</label>
 <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="0" />445</label>
 <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="4" />55失败</label>
 </span>
 </div>

 <div class="line">
 <span>操作说明:</span>
 <textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;></textarea>

 </div>

 <div class="line" style="text-align:center;">
 <input type="button" value="提交" class="form-button" id="submit2" />
 <input type="hidden" id="id_add" value="22" />

 </div>
</div>

<div class="modal-footer">
 <span class="loading"></span>
 <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
<script src="/js/dragModal.js"></script>
<script>
 $(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');

</script>
   

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
js中生成map对象的方法
Jan 09 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
js实现div在页面拖动效果
May 04 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
值得分享的bootstrap table实例
Sep 22 #Javascript
第一次动手实现bootstrap table分页效果
Sep 22 #Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 #Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 #Javascript
JavaScript面试题大全(推荐)
Sep 22 #Javascript
JavaScript 是什么意思
Sep 22 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
js自带函数备忘 数组
2006/12/29 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
了解重排与重绘
2019/05/29 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
护理专业优质毕业生自荐书
2014/01/31 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
团日活动总结怎么写
2014/06/25 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
教你部署vue项目到docker
2022/04/05 Vue.js
Go并发4种方法简明讲解
2022/04/06 Golang