如何使模态框响应?

Posted

技术标签:

【中文标题】如何使模态框响应?【英文标题】:How to make modal box responsive? 【发布时间】:2014-06-28 09:26:27 【问题描述】:

我已经实现了这个基于 jQuery 的模态框:http://leanmodal.finelysliced.com.au/。它运行完美,而且非常易于使用。但是,它没有响应 - 与网站的其他部分相反。这是我到目前为止得到的:

CSS 部分

#lean_overlay 
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;

div.modalbox 
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    padding : 10px;
    width: 400px;
    display : none;
    position : absolute;

.modalbox-header 
    background: url("../images/hd-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-bottom: 1px solid #CCCCCC;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px 0 0px 20px;
    margin: -10px 0 10px -10px;
    width : 100%;

Javascript(部分):

(function($)$.fn.extend(leanModal:function(options)var defaults=top:100,overlay:0.5,closeButton:null;var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function()var o=options;$(this).click(function(e)var modal_id=$(this).attr("href");$("#lean_overlay").click(function()close_modal(modal_id));$(o.closeButton).click(function()close_modal(modal_id));var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
$("#lean_overlay").css("display":"block",opacity:0);$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css("display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px");$(modal_id).fadeTo(200,1);e.preventDefault()));function close_modal(modal_id)$("#lean_overlay").fadeOut(200);$(modal_id).css("display":"none")))(jQuery);

最后 - 如何使用

<div class="modalbox">
    <div class="modalbox-header">
        <h2 class="normal">Title</h2>
        <div class="modal_close">&nbsp;</div>
    </div>
    <div class="modal_content">
        <p>Text goes here</p>
    </div>
</div>

我怎样才能让它响应?提前致谢!

【问题讨论】:

以 % 为单位而不是 px 的宽度;) 这似乎没有帮助。然后框不会居中。 如果 margin: auto 不起作用。尝试左,例如如果宽度为 60%,左 = (100 - 60)/2 = 20%。最后 - 左:20% 更改为 % 并添加 margin:auto 解决了问题。非常感谢@morvy :-) 我认为 morvy 需要写答案,hskrijelj 需要将其标记为正确,否则看起来第一个答案是正确的。 【参考方案1】:

在 CSS 中指定 Width 时,添加 max-width: ... 这样就可以了!

像这样:

div.modalbox 
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    padding : 10px;
    max-width: 400px;
    display : none;
    position : absolute;

【讨论】:

【参考方案2】:

此解决方案涉及一点点破解库文件本身。首先我们限制容器的宽度永远不会超出屏幕

div.modalbox 
    max-width: 94%;
    display : none;

现在在 jquery.leanModal.js 文件中找到模态元素在屏幕上的位置(第 42 行)并像这样进行更改

$(modal_id).css(           
    'display' : 'block',
    'position' : 'fixed',
    'opacity' : 0,
    'z-index': 11000,
    //'left' : 50 + '%',
    'left' : ($(window).width() - modal_width)/2 + "px",  //<--this was margin-left before
    'top' : o.top + "px"
);

现在它是响应式的。并且容器仍然会在更大的屏幕上使用内容宽度。

此外,如果您想通过调整浏览器宽度而不刷新页面来遵循弹出行为,请将此代码添加到库文件中 e.preventDefault(); (第 ~55 行)

$(window).resize(function()
    $(modal_id).css( 
        'left' : ($(window).width() - $(modal_id).outerWidth())/2 + "px"
    );
);

【讨论】:

以上是关于如何使模态框响应?的主要内容,如果未能解决你的问题,请参考以下文章

java+selenium3模态框处理

第126天:移动端-原生实现响应式模态框

vc++6.0如何实现在模态对话框编辑框中输入数据,单击确定按钮将数据添加到组合框按钮中!

iview怎么设置模态框的大小

Bootstrap多层模态框如何嵌套?

如何获取bootstrap模态框中的数据