bootstrap拖动div_bootstrap实现弹窗和拖动效果

这篇博客介绍了如何利用Bootstrap创建具有拖动功能的动态弹窗。通过添加触发按钮、编写打开弹窗的JS脚本、设置modal内容、添加拖动效果,并展示了如何打开多个可拖动modal的示例。文章详细讲解了每个步骤,并提供了相关的代码示例。
摘要由CSDN通过智能技术生成

有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用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);

$('

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值