我一直在寻找一个"灯箱"类型的解决方案,允许这个但尚未找到一个(请,如果您知道任何,请建议).
我正在尝试重新创建的行为就像您在点击图片时在Pinterest上看到的那样.叠加层是可滚动的(因为整个叠加层像页面顶部的页面一样向上移动),但叠加层后面的主体是固定的.
我试图用CSS创建它(即div在整个页面和主体上面叠加overflow: hidden),但它不会阻止div可滚动.
如何防止正文/页面滚动但仍在全屏容器内滚动？
我已经尝试了几天来配置我的缩略图库,所以所有图像都显示相同的高度和宽度.但是当我将Css代码更改为时,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
我得到的图像大小都相同,但纵横比被拉伸毁了图像.有没有办法调整图像容器的大小而不是图像？让我保持纵横比.但仍然调整图像大小.(我不介意我切掉一些图像.)
提前致谢!
$.getScript('ajax/test.js', function() {
alert('Load was performed.');
});
..就像上面的代码在请求时加载外部JS一样,是否有类似的东西可以在需要时加载外部CSS样式表？
例如,当我在我的网站上使用灯箱(内联弹出窗口)时,我想避免加载灯箱JS和CSS文件onload,除非用户请求.
谢谢
我正在寻找一个灯箱来播放来自Youtube和Vimeo的视频.
有什么建议？
我正在使用jQuery litebox.添加JS和CSS文件后,我收到此错误TypeError:
$(...).on is not a function at this line in js file
"return $('body').on('click',
'a[rel^=lightbox], area[rel^=lightbox]', function(e) {"
谁能帮助我理解这里的问题？
我在CakePHP 1.3中执行此实现.
我在bootstrap网站上使用jQuery灯箱插件.它box-sizing: border-box通过通用选择器设置.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
灯箱div因此而不正确(有时会出现垂直滚动条).一旦我们通过网络检查器删除它,它似乎没问题.有没有办法删除此特定元素的box-sizing属性.
box-sizing:''或box-sizing:none似乎不起作用.
我已经完成了这方面的优秀文档,这很棒. http://dimsemenov.com/plugins/magnific-popup/documentation.html 我的基本弹出工作正常.
我的问题在于动画.我只是无法让他们工作.抱歉,如果我错过了一些非常基本的东西,但我现在已经花了很长时间,希望有人可以指出我的错误.它目前似乎没有任何褪色.
我已经在codepen上玩了它,并且可以通过删除CSS来重新创建这个问题,所以也许这不是正确的,虽然我知道它是链接,因为它的样式弹出而不是动画.
这是我的HTML:
<div id="Column1"><div id="aboutus" >
<div id="pop" >
<a href="/stalkseed/assets/Uploads/stalk-seed-about-us.jpg" data-effect="mfp-newspaper" title="" alt="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about-us','','/stalkseed/assets/Uploads/aboutus-ovr.jpg',1)"><img src="/stalkseed/assets/Uploads/aboutus.jpg" name="about-us" border="0" id="about-us"/></a>
</div>
来自同一页面的我的JavaScript:
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('#pop').magnificPopup({
delegate: 'a',
type: 'image',
removalDelay: 500, //delay removal by X to allow out-animation
callbacks: {
beforeOpen: function() {
// just a hack that adds mfp-anim class to markup
this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true // allow opening popup on middle mouse …有没有人知道用纯javascript构建的小型,有限功能的灯箱？这是一个可嵌入的小部件,因此不使用jquery的原因.我真正需要的是为特定div创建一个叠加层,或者只是传递一些HTML.
我已经使用了lightbox和fancybox,但从来没有真正看到任何理由选择一个而不是另一个.还有一大堆我没有像这些http://planetozh.com/projects/lightbox-clones/那样使用.该页面上的数据非常陈旧,在许多情况下都是不正确的.
是否有任何理由选择其中一个？性能,API选项,易于定制等
这更像是一个主观问题而不是黑白问题.我还没有看到任何关于这个话题的比较,不知道还有什么要问这个.
编辑 看完建议后,我认为fancybox有最好的api,它只有5kb gzip.http://fancybox.net/api Colorbox看起来也很棒.
可用性提示:如果您考虑从焦点窃取覆盖中捕获用户输入,请不要这样做.如果用户需要查看父窗口上的信息以填写表单,现在它们就会被困住.有时这些弹出窗口是合适的,但大多数情况下滑动块元素可以更好地完成工作.
我在我的一个项目中使用了vh(视口单元)css但在移动safari中它不起作用.似乎Safari不知道如何处理vh,但它在其他浏览器中工作正常.无论有没有,我想做同样的效果,请帮助我.顺便说一句,我正在使用facebox.(身高:50%不能正常工作)
HTML:
<div id="facebox" style="top: 0px; left: 0px; display: block;">
<div class="popup">
<div class="body">
<div class="content_light">
<div class="Lcontent_left"></div>
<div class="Lcontent_right">
<div class="Lright_content"></div>
</div>
</div>
</div>
</div>
</div>
这是我的css:
#facebox .popup {
display:block;
position:relative;
margin:auto;
margin-top:0%;
min-height:100vh;
height:1px;
border-radius:5px;
}
#facebox .body {
padding:0px;
display:block;
position:relative;
background: #fff;
width:100%;
min-height:100vh;
height:1px;
margin:auto;
border-radius:5px;
}
.Lcontent_left{
position:relative;
float:left;
width:100%;
height:50vh;
/*min-height:250px;*/
text-align:center;
overflow:hidden;
}
.Lcontent_left_fullscreen{
display:none;
}
.Lcontent_right{
float:left;
text-justify:inter-word;
position:relative;
width:100%;
height:50vh;
background-color:white;
overflow:auto;
font-family:"Open Sans",Helvetica,sans-serif;
}
.Lright_content{
position:relative;
width:95%;
margin:auto; …