在jQuery对话框中滚动时如何添加框阴影
Posted
技术标签:
【中文标题】在jQuery对话框中滚动时如何添加框阴影【英文标题】：how to add box shadow when scrolling in jquery dialog 【发布时间】：2017-06-26 09:35:52 【问题描述】：我想在对话框中滚动时在 .ui-dialog-titlebar 上添加框阴影。像这样的东西： 这是我的代码：
$(function()
$("#dlg-vop").dialog(
autoOpen: false,
modal: true,
draggable: false,
width: 480,
maxHeight: 480,
closeText: "",
buttons: true,
dialogClass: "vop-dialog",
open: function()
$("html").addClass("dialog-open");
$("#dlg-vop").scrollTop(0);
,
close: function()
$("html").removeClass("dialog-open")
,
create: function(event, ui)
var header = $('.ui-dialog-titlebar');
$(window).scroll(function()
if($(window).scrollTop() <= 30)
header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
else
header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
);
);
$( "#vop-opener" ).on( "click", function()
$( "#dlg-vop" ).dialog( "open" );
return false;
);
);<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
html.popup-open, html.popup-open bodyoverflow: hidden; height: auto; min-height: inherit;
acolor:#000;
.ui-widget-overlaybackground-color: rgba(0,0,0,.5); opacity: 1;
.ui-widget.ui-widget-contentborder:0; padding:0;
.ui-widget-headerborder:0; background: 0 none; border-radius: 0;
</style>
<a href="#" id="vop-opener">Open dialog</a>
<div id="dlg-vop" class="vop" title="Test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
<p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
<p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
<p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
<p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
</div>我认为问题出在：
$(window).scroll(function()
if($(window).scrollTop() <= 30)
header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
else
header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
);
当我在其他元素而不是对话框中使用它时，它会起作用。不幸的是我不知道如何修改它。我希望有人可以帮助我:)
【问题讨论】：
【参考方案1】：问题实际上是您在 $(window).scroll 滚动而不是 JQuery 对话框 ($('#dlg-vop').scroll) 上调用函数。试试下面更新的 sn-p。
$(function()
$("#dlg-vop").dialog(
autoOpen: false,
modal: true,
draggable: false,
width: 480,
maxHeight: 480,
closeText: "",
buttons: true,
dialogClass: "vop-dialog",
open: function()
$("html").addClass("dialog-open");
$("#dlg-vop").scrollTop(0);
,
close: function()
$("html").removeClass("dialog-open")
,
create: function(event, ui)
var header = $('.ui-dialog-titlebar');
$('#dlg-vop').scroll(function()
if($('#dlg-vop').scrollTop() <= 30)
header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
else
header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
);
);
$( "#vop-opener" ).on( "click", function()
$( "#dlg-vop" ).dialog( "open" );
return false;
);
);html.popup-open, html.popup-open body
overflow: hidden;
height: auto;
min-height: inherit;
a
color:#000;
.ui-widget-overlay
background-color: rgba(0,0,0,.5);
opacity: 1;
.ui-widget.ui-widget-content
border:0;
padding:0;
.ui-widget-header
border:0;
background: 0 none;
border-radius: 0;
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<a href="#" id="vop-opener">Open dialog</a>
<div id="dlg-vop" class="vop" title="Test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
<p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
<p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
<p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
<p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
</div>【讨论】：
以上是关于在jQuery对话框中滚动时如何添加框阴影的主要内容，如果未能解决你的问题，请参考以下文章