Bootstrap Modal Popup display as double layer in ASP.NET and shifts content when popups

Question

I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below

I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.

Here is my modal popup code

 <div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>

And here is the button code

 <button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
    <i class="fa fa-copy"></i>| Clone Data
 </button>

Answer 1

For that jumping, edit it's CSS

body.modal-open{
  overflow: visible !important;
}

Answer 2

The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:

.modal {
  overflow-y: auto;
}

.modal-open {
  overflow: auto;
}