Html 模式按钮在单击时更改位置
我在一个网站上工作，你可以查看 问题: 单击右上角的Bestill nå按钮时，可以看到按钮的位置在单击时发生变化 我如何使其在单击按钮时的位置相同 以下是完整的HTML标题：Html 模式按钮在单击时更改位置,html,css,twitter-bootstrap,bootstrap-modal,Html,Css,Twitter Bootstrap,Bootstrap Modal,我在一个网站上工作，你可以查看 问题: 单击右上角的Bestill nå按钮时，可以看到按钮的位置在单击时发生变化 我如何使其在单击按钮时的位置相同 以下是完整的HTML标题： <header id="hjem"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar"> <div class="contain
<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 -->
body.modal-open {
overflow: auto;
padding-right: 0 !important;
}
(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);
它没有向我显示任何模式，它正在将我发送到一个联系人表单。抱歉，没有更新代码，请重试。可能是绝对的重复。消失的滚动条使按钮移动。我还建议增加宽度：100%；对class=img响应，因为现在它没有覆盖整个宽度。我明白了，有没有什么方法可以在不向模态添加滚动条的情况下修复它？同时感谢您注意到class=img responsive，我添加了宽度：100%；现在
(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);