Bootstrap Responsive Modal with Shake Animation

Responsive modal is major feature of Bootstrap framework. If you are integrating for first time you will face many issues. So many additional features are behind this Modal Popup.

Requirements

JQuery
Bootstrap JS & css

Full Demo for Button Shake Animation | Modal Popup Animation

First we have created an Shake Animation Plugin for Jquery.

Shake It plugin Code

//ShakeIt Plugin 
jQuery.fn.shakeit = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        //$(this).css("position","relative");
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};

HTML Code starting from body is for responsice bootstrap modal with save and close buttons.

You may have noticed the button code data-value="close" && data-value="save".
These additional properties of the element can be accessed through $(this).data('value');

To Fix the jumping issue with bootstrap modal comment this code in the following $(this).css("position","relative");

Increase the Speed of Animation

To increase number of shakes $("#shakeit").shakeit(30,75,800);
30 - Number of Movements from left to right & right to left.
75 - Pixels from the Element.
800 - duration of single movement (Complete left to right & right to left) in milliseconds.

FULL Code

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Shake the Bootstrap Modal Popup </title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.23.1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){
$('.launchConfirm').on('click', function (e) {
    $('#confirm')
        .modal({ backdrop: 'static', keyboard: false })
        .one('click', '[data-value]', function (e) {
        console.log($(this).data('value'));
            if($(this).data('value')==="close") {
                    //alert('You are closing the Modal');
                    $("#confirm").shakeit(3,7,800);
            } else {
                alert('You have pressed Save');
            }
        });
});
$("#shakeit").click(function(){
    $("#shakeit").shakeit(3,7,800);
});
});//]]>  

//ShakeIt Plugin 
jQuery.fn.shakeit = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative");
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};


</script>

</head>

<body>
  <div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Modal</button>
        <button id="shakeit" class="btn">Shake this Button</button>
    </div>
</div>

<div id="confirm" class="modal fade"> <!-- /.modal-content Begins -->
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-value="close" >Close</button>
        <button type="button" data-value="save" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
  
</body>
</html>

Bootstrap Responsive Modal with Shake Animation

Requirements

Increase the Speed of Animation

Post a Comment

Contact Form