Bootstrap implements the pop-up window and drag effect, while the bootstrap pop-up window is dragged

Bootstrap implements the pop-up window and drag effect, while the bootstrap pop-up window is dragged

Sometimes it is nice to develop some special effects. You can operate Your webpage like on your computer. Here we will introduce a little more window and drag effects using bootstrap!

Here, we do not use the static open method, low ..., 1. Add a link to trigger and open the button; 2. Write a dynamic open js script; 3. Write the modal intermediate content; 4. Add the drag effect; 5. open multiple modal, call dragModal (new Array ('modalid1', 'modalid2 '));

1. Add a link for triggering. 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 the container -->

2. Write a dynamic open js script:

// Open the pop-up 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) {// prohibit text selection, which may affect the drag operation $ ('html '). off ('selectstart '). on ('selectstart', function () {return false ;}); $ ('#' + modalId).html(data.html Data); $ ('#' + modalId ). modal ({'show': true}) ;}else {alert (data.info) ;}, 'json ');

3. Compile the 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"> × </a> 
4. Add the drag effect:
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, 'did': 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 ++) {// note that the I value cannot be directly input here, which is used for the effect of adding multiple Windows $ ("#" + 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 () {// when disabled, open the selected $ ('html '). off ('selectstart '). on ('selectstart', function () {return true ;});});}}
5. open multiple modal and call dragModal (new Array ('modalid1', 'modalid2 '));
This is the case throughout the process. If you need it, please refer to it!
Articles you may be interested in:

 

 
  
Js exit pop-up code set
 
  
Code for the pop-up window in the lower right corner of js (IE only)
 
  
Js pop-up window code can specify the pop-up interval
 
  
Js click to bring up the div layer to achieve the drag-and-drop pop-up effect
 
  
Examples of native JS clickable window Effects
 
  
Details about js pop-up window return values (window. open Mode)
 
  
Fully parse the Bootstrap pop-up window implementation method