登录  /  注册
首页 > web前端 > js教程 > 正文
bootstrap实现弹窗和拖动效果_javascript技巧
php中文网
发布: 2016-05-16 15:22:04
原创
1399人浏览过

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

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

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

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