【问题标题】:The modal pop up is not responsive. The website is responsive and the content inside the popup is responsive as well模态弹出窗口没有响应。该网站是响应式的,弹出窗口内的内容也是响应式的
【发布时间】:2016-01-24 03:49:11
【问题描述】:

弹出窗口本身不会调整大小,当我减小要测试的浏览器大小时,弹出窗口被隐藏,当我滚动时,弹出窗口保持固定。所以,这里有一些代码。

所以我正在使用这个jquery.leanModal.min.js

这是我的 HTML 代码:

<a id="modal_trigger" class="transition-effect btn" href="#modal"> 
<div id="modal" class="popupContainer" style="display:none;">   
<section class="popupBody">
<div class="user_login">
<form method="post">
 ........ and it continues for the sign up form

CSS:

lean_overlay {
    position: fixed;

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

.popupContainer{
    position:absolute;

    width:50%;
    height: auto;
    left:45%;
    top:80px;
    background: #FFF;
    display : none;
    margin: auto;
}

.popupBody {
    padding:20px;

    box-sizing: border-box;
    border: 3px solid cyan;

}

【问题讨论】:

标签: javascript html css responsive-design popup


【解决方案1】:

Leanmodal 在其网站上似乎反应不快。

您可以尝试响应速度更快的弹出库,例如 jPopup(https://github.com/seahorsepip/jPopup) 或为leamodal 编写媒体查询 css。

【讨论】:

  • 谢谢。我已经使用了 css 媒体查询,它现在可以工作了。
猜你喜欢
  • 1970-01-01
  • 2017-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-12-26
  • 2019-03-21
  • 2016-10-26
相关资源
最近更新 更多