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

这篇文章主要为大家详细介绍了使用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中间内容：

  ×modal window
 
  脚本名称： 
 日期： 
 是否停止： 强制停止正常处理
 执行情况： 1122成223行44555失败
 操作说明： <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></pre>    </div><p>4、添加拖动效果：</p><div class="jb51code"><pre class="brush:js;"> 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; }); }); } } </pre></div><p>5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));<br/></p><p>整个过程即是如此，有需要的，就参考参考吧！<br/></p><p>如果大家还想深入学习，可以点击<a target="_blank" href="">这里</a>进行学习，再为大家附两个精彩的专题：<a target="_blank" href="">Bootstrap学习教程</a><a target="_blank" href="">Bootstrap实战教程</a></p><p></p></div><p>以上就是使用bootstrap实现多窗口和拖动效果的详细内容，更多请关注0133技术站其它相关文章！</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i
                        class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;"
                                                                               class="action action-rewards"
                                                                               data-event="rewards"><i
                    class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载：<a href="/">0133技术站首页</a> » <a href="/cate74/">JavaScript 教程</a></div><!--<div class="article-tags">标签：<a href="/archives/tag/javascript" rel="tag">JavaScript</a><a
                    href="/archives/tag/%e5%be%ae%e4%bf%a1" rel="tag">微信</a><a
                    href="/archives/tag/%e5%be%ae%e4%bf%a1%e7%9a%84%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">微信的版本号</a><a
                    href="/archives/tag/%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">版本号</a><a
                    href="/archives/tag/%e8%af%ad%e4%b9%89%e5%8c%96" rel="tag">语义化</a></div>--><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate74/11696131539025.html" rel="prev">JS实现按钮添加背景音乐示例代码</a></span><span class="article-nav-next">下一篇<br><a href="/cate74/11696148226025.html" rel="next">js数据向上翻滚_数据滚动</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate74/112731067600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d2d798d9febd779.jpg-160" alt="如何在JavaScript中使用对象方法？" class="thumb"></a><a href="/cate74/112731067600.html">如何在JavaScript中使用对象方法？</a></li><li><a href="/cate74/112752011600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d32861c799f7757.png-160" alt="18个用于创建漂亮图表的JavaScript库推荐" class="thumb"></a><a href="/cate74/112752011600.html">18个用于创建漂亮图表的JavaScript库推荐</a></li><li><a href="/cate74/112855793600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d42bb0686598404.jpg-160" alt="POST 请求的三种常见数据提交格式" class="thumb"></a><a href="/cate74/112855793600.html">POST 请求的三种常见数据提交格式</a></li><li><a href="/cate74/112863815225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5e13e133098fe155.jpg-160" alt="JavaScript基础--引用数据类型 (对象)" class="thumb"></a><a href="/cate74/112863815225.html">JavaScript基础--引用数据类型 (对象)</a></li><li><a href="/cate74/112899244025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d454d428ac89348.jpg-160" alt="如何在JavaScript中使用字符串？" class="thumb"></a><a href="/cate74/112899244025.html">如何在JavaScript中使用字符串？</a></li><li><a href="/cate74/112916500025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d47eb8530061725.jpg-160" alt="Window对象在前端领域的角色" class="thumb"></a><a href="/cate74/112916500025.html">Window对象在前端领域的角色</a></li><li><a href="/cate74/112917040100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/001/5f6807e416857960.jpg-160" alt="了解JavaScript中的类" class="thumb"></a><a href="/cate74/112917040100.html">了解JavaScript中的类</a></li><li><a href="/cate74/112938684100.html"><img data-src="https://ss.0133.cn/upload/article/000/000/013/5d4949232b458994.jpg-160" alt="JavaScript中Switch语句的使用方法" class="thumb"></a><a href="/cate74/112938684100.html">JavaScript中Switch语句的使用方法</a></li></ul></div><!--
            <div class="title" id="comments"><h3>评论
                    <small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100"
                                 height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment"
                                      id="comment" cols="100%" rows="3" tabindex="1"
                                      onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">
有人回复时邮件通知我
-->
前端开发
HTML 教程CSS 教程JavaScript 教程Vue.js 教程Node.js 教程
热门搜索：
窗口拖动
拖动窗口
窗口动画效果
可拖动窗口
拖动效果

置顶推荐
美团试用会员会不会自动续费2021-12-22
猜你喜欢
For循环中分号隔开的3部分的执行顺序探讨2021-10-10
JS控件bootstrap datepicker使用方法详解2021-09-18
js贪吃蛇游戏实现思路和源码2021-09-12
微信小程序 this和that详解及简单实例2021-09-11
微信公众号网页分享功能开发的示例代码2021-09-17
微信小程序 框架详解及实例应用2021-09-11
Node.js中安全调用系统命令的方法（避免注入安全漏洞）2021-09-16
微信小程序 删除项目工程实现步骤2021-09-18