我正在网站上工作，您可以查看website here.
问题： 当您单击右上角的“Bestillnå”按钮时，您可以看到单击时按钮的位置发生了变化。
如何点击按钮时定位是否相同？
以下是完整标题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">
<a href="https://www.facebook.com/pages/FantasyLab/678021948955247?ref=bookmarks" target="_blank"><img class="facebook" src='images/social-sprite.svg' alt='Icons'></a>
<a href="https://twitter.com/FantasyLabNorge" target="_blank"><img class="twitter" src='images/social-sprite.svg' alt='Icons'></a>
<a href="https://www.youtube.com/channel/UC3SHLhbbBcWzanTm-vzrIyQ" target="_blank"><img class="youtube" src='images/social-sprite.svg' alt='Icons'></a>
<a href="https://www.linkedin.com/company/fantasylab-norway" target="_blank"><img class="linkedin" src='images/social-sprite.svg' alt='Icons'></a>
<a href="https://plus.google.com/110982605350769996479/posts" target="_blank"><img class="google-plus" src='images/social-sprite.svg' alt='Icons'></a>
</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：
.modal-backdrop {
position: relative !important;
}
感谢任何帮助，谢谢！
修改 添加此CSS后：
body.modal-open {
overflow: auto;
padding-right: 0 !important;
}
它解决了这个问题。但是，padding-right:来自element.style class="modal-open"，padding-right: 17px;有默认(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"><a href="#" class="paulund_modal_close"></a><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);
。我相信这会被jQuery添加到正文中。有谁知道如何从jQuery中删除它而不是在CSS中添加它？
模态按钮的jQuery代码：
var response = client.Post<LoginResponse>("/v2/login", new Login { .. })