Modal button changes position when clicked - html

Question

I'm working on a website, you can view the website here.
Issue:
When you click the "Bestill nå" button at the top right corner, you can see that the positioning of the button changes when clicked.
How can I make it so that the positioning is the same when the button is clicked?
Here is the full header HTML:
<header id="hjem">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="Hjem" href="#hjem" title="FantasyLab">
<img src="images/fantasylab-logo.svg" style="width: 160px;">
</a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-left">
<li><a class="se1" href="#om-fantasylab">Om Fantasylab</a></li>
<li><a class="se2" href="#referanser">Referanser</a></li>
<li><a class="se3" href="#lansering">Lansering</a></li>
<li><a class="se4" href="#kontakt">Kontakt</a></li>
</ul>
<div class="social pull-right" style="margin: 13px 140px 0 0">
<img class="facebook" src='images/social-sprite.svg' alt='Icons'>
<img class="twitter" src='images/social-sprite.svg' alt='Icons'>
<img class="youtube" src='images/social-sprite.svg' alt='Icons'>
<img class="linkedin" src='images/social-sprite.svg' alt='Icons'>
<img class="google-plus" src='images/social-sprite.svg' alt='Icons'>
</div>
</div> <!-- navbar-collapse -->
</div> <!-- container -->
<!-- Trigger the modal with a button -->
<div class="container">
<button type="button" class="header-button btn btn-default navbar-btn pull-right" data-toggle="modal" data-target="#myModal">Bestill nå</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</nav>
</header> <!-- header -->
CSS I have added for the modal function:
.modal-backdrop {
position: relative !important;
}
Any help is appreciated, thanks!
EDIT:
After adding this CSS:
body.modal-open {
overflow: auto;
padding-right: 0 !important;
}
It fixed the problem. However the padding-right: is coming from element.style on class="modal-open" which has a default padding-right: 17px;. I believe this gets added to the body by jQuery. Does anyone know how I can remove this from the jQuery instead of adding it in the CSS?
jQuery code for the modal button:
(function($){
// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-25px',
'left':'20px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
'background': 'url(images/close.png) no-repeat',
});
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':'100%',
'width':'100%',
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
/**
* Create the block page div
*/
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
/**
* Creates the modal box
*/
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><div class="paulund_inner_modal_box"><h2>' + options.title + '</h2><p>' + options.description + '</p></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);