Bootstrap modal frame horizontal vertical center and increase drag function _javascript skill

Recently developed a CMS system using the bootstrap, in the development of a add some options, you intend to pop a modal box, but found that the modal box will not be centered vertically on the screen, but in the top of the screen, looking for a lot of information is not done, and finally tried out a JS method, At the same time also need to bootstrap modal box can be dragged, but found that the default is not, rummaged over the network to find out. Now to share with you:

Original address: http://www.panshy.com/articles/201509/webdev-2524.html

The following is a method for increasing the drag function of the bootstrap modal frame

$ ("#myModal"). Draggable ({ 
handle: ". Modal-header", 
cursor: ' Move ', 
refreshpositions:false 

Handle: ". Modal-header", the removal will be able to drag the entire modal box, where Modal-header represents the class or ID of the dragged Div

The following code is centered horizontally vertically with the pop-up bootstrap modal box

/* Center modal 
/function centermodals () { 
$ (' #myModal '). each (the function (i) { 
var $clone = $ (this). Clone (). CSS (' Display ', ' block '). Appendto (' body '); var top = Math.Round ($clone. Height ()-$clone. Find ('. Modal-content '). Height ())/2); 
top = top > 0? top:0; 
$clone. Remove (); 
$ (this). Find ('. Modal-content '). CSS ("Margin-top", top);} 
$ (' #myModal '). On (' Show.bs.modal ', centermodals); 

of which, $ (window). On (' Resize ', centermodals); On behalf of the user to change the browser event, you can not use, but change the browser, the modal box will not follow the changes.

The above JS code added to the end of the page can be

Bootstrap modal Box html

<!--Modal--> <div class= "Modal fade" id= "Mymodal" tabindex= " 
-1" role= "dialog" aria-labelledby= " Mymodallabel "aria-hidden=" true "> 
<div class=" Modal-dialog "> 
<div class=" Modal-content "> 
<div class= "Modal-header" > 
<button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= " True ">x</button> 
 
 

Modal Box Contents

</div> 
</div> 
<div class= "Modal-footer" > 
<button type= "button" class= "btn Btn-default "data-dismiss=" modal "> Off </button> 
</div> 
</div> 
</div> 

The above is a small series to introduce the Bootstrap modal box horizontal vertical center and increase drag-and-drop function, to achieve a simulation of the background data login effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!