bootstrap实现弹窗和拖动效果

发布时间：2020-12-18 00:57:58 所属栏目：安全来源：网络整理

导读：有时开发一些特效，自己感觉挺爽的，像操作自己电脑一样操作你的网页，这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧！这里，我们不使用静态打开的的方式，low...,1、添加一个a链接触发，打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4

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

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

1、添加一个a链接触发，打开按钮：

2、编写动态打开js脚本：

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;}

强制停止正常处理

操作说明：

<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')
  });
<p>});<br />
// drag effects begin,define the global variables to receive the changes,because of the different function of the modal<br />
dragModal('editModal');</p>
</script> 
</pre>
</div>
<p><h3>4、添加拖动效果：</h3></p>
<div class="jb51code">
<pre class="brush:js;">
var clicked = "0";
var dif = {};
;function dragModal(obj) {
<p>if(clicked == undefined || obj == undefined || dif == undefined){<br />
return false;<br />
}<br />
if(typeof obj == 'string')<br />
{<br />
obj = new Array(obj);<br />
}<br />
var modalNums = obj.length;<br />
//drag effects begin<br />
var i = 0;<br />
for (i = 0; i < modalNums; i++) {<br />
dif[obj[i]] = {'difx': 0,'dify': 0};<br />
}<br />
$("html").off('mousemove').on('mousemove',function (event) {<br />
if (clicked == "0") {<br />
for (i = 0; i < modalNums; i++) {<br />
dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left;<br />
dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top;<br />
}<br />
}<br />
if (clicked > 0 && clicked <= modalNums) {<br />
var clickedObj = obj[clicked - 1];<br />
var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px','');<br />
var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px','');<br />
$("#" + clickedObj).css({top: newy,left: newx});<br />
}</p>
<p>});</p>
<p>$("html").off('mouseup').on('mouseup',function (event) {<br />
clicked = "0";<br />
});</p>
<p>for(i = 0; i < modalNums; i++){<br />
//注重此处不能直接传入i值，此处即为添加多窗口时的效果使用<br />
$("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i},function (event) {<br />
clicked = event.data.index + 1;<br />
});<br />
$("#" + obj[i] + " .modal-footer").off().on('mousedown',function (event) {<br />
clicked = event.data.index + 1;<br />
});<br />
$('#' + obj[i]).on('hide.bs.modal',function () {  //关闭时打开选中<br />
$('html').off('selectstart').on('selectstart',function () {<br />
return true;<br />
});<br />
});</p>
<p>}<br />
}</p>
</pre>
</div>
<p><h3>5、打开多个modal,'modalId2'));</h3></p>
<p>整个过程即是如此，有需要的，就参考参考吧！</p>
<p>如果大家还想深入学习，可以点击进行学习，再为大家附两个精彩的专题：

</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/442091.html" target="_blank">c# –  ASP.NET核心 – 在Visual Studio 2015中通??过Docke</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/495376.html" target="_blank">scala集合与数据结构</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/338717.html" target="_blank">【数据结构】AVL树及平衡化旋转</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/495150.html" target="_blank">什么是Scala的OptManifest和NoManifest？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/394016.html" target="_blank">bash文本搜索：查找一个文件的内容是否存在于另一个文件中</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/572988.html" target="_blank">angularjs – Grails Asset-pipeline不加载角度局部模板</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/378675.html" target="_blank">如何在Bash中以拉链方式合并两个数组？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/357129.html" target="_blank">一个简单的找出网段内存活主机的脚本</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/470837.html" target="_blank">Chisel3 - Scala语言专家</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/574448.html" target="_blank">与ngModel绑定的Angular 2双向数据</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/427830.html" target="_blank">如何用bash更新文件行？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/363742.html" target="_blank">EditPlus打开.tpl文件高亮显示代码</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/575376.html" target="_blank">mat-select multiple设置一个数组Angular4中的选</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/365549.html" target="_blank">shell数组</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/423401.html" target="_blank">bash – 将数据写入Dockerfile中的文件</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/566785.html" target="_blank">angularjs – ng形式的角度ng重复,访问控制器中的</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/470855.html" target="_blank">Scala-Unit4-Scala数组/集合</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/564488.html" target="_blank">Angular 代理设置</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/424581.html" target="_blank">如何从shell中的文本文件中选择随机的唯一行？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/539920.html" target="_blank">.net 中调用 webservice 的N中方法（终于可以孔乙</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>

bootstrap实现弹窗和拖动效果

1、添加一个a链接 触发，打开按钮：

2、编写动态打开js脚本：

3、编写modal中间内容：

1、添加一个a链接触发，打开按钮：