Bootstrap to realize _javascript technique of window and drag effect

Sometimes the development of some special effects, they feel very cool, like operating their own computer to operate your Web page, here is a use of bootstrap a little more windows and drag effect bar!

Here, we do not use the static open way, low...,1, add a chain contact hair, open the button, 2, write dynamic open JS script; 3, write modal intermediate content, 4, add drag effect, 5, open multiple modal, call Dragmodal (new Array (' modalId1 ', ' modalId2 '));

1, add a chain contact hair, open the button:

<a href= "javascript:;" title= "switch" class= "open-modal-dynamic" url= "index.php?m=index&c=cc&a=aa&id=22" "alert= ' 1 ' divid=" Editmodal "> Open modal<a> <div id=" Addmodal "class=
" modal Hide Fade "style=" max-width : 800px; "data-backdrop=" Static ></div> <!--open container-->

2, write dynamic open js script:

Open the window
 $ ('. 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) {
    //forbidden to select text, will affect
    $ (' html ') when dragging. Off (' Selectstart '). On (' Selectstart ', function () {return false;});
    $ (' # ' + modalid). HTML (data.htmldata);
    $ (' # ' + modalid). Modal ({' Show ': true});
   } else{
    alert (data.info);
   }
  }, ' json '); 

3, write modal intermediate content:

<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= " Close small window "data-dismiss=" modal ">x</a>  

4, add drag effect:

var clicked = "0"; var dif = {};; function Dragmodal (obj) {if (clicked = = Undefined | | obj = undefined | | dif = = undefined) {return FAL
 Se
 } 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++) {//The focus here is not to pass directly to the I value, where the effect of adding multiple windows is used $ ("#" + Obj[i] + ". Modal-header"). Off () (' Mousedo
  Wn ', {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 () {///turned on when selected $ (' HTML '). Off (' Selectstart '). On (' Selectstart ', function ()
   {return true;
  });
 
 });


 }
}

5, open multiple modal, call Dragmodal (new Array (' modalId1 ', ' modalId2 '));

The whole process is so, there is a need for reference reference bar!

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course