jquery 如何让莫代尔盒子React灵敏？

sycxhyv7 于 2022-11-22 发布在 jQuery

关注(0)|答案(2)|浏览(98)

我已经实现了这个基于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>

我怎样才能使它响应？提前感谢！

jquery

来源：https://stackoverflow.com/questions/23584937/how-to-make-modal-box-responsive

2条答案

按热度按时间

vddsk6oq1#

在CSS中指定宽度时，添加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;
}

赞(0）回复(0）举报 2022-11-22

hc8w905p2#

这个解决方案需要对库文件本身进行一些修改。

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"
    });
});

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 如何让莫代尔盒子React灵敏？

2条答案

相关问题

热门标签

最新问答