单击时，模态按钮会更改位置

Question

我正在网站上工作，您可以查看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">&times;</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 { .. })