0
Я хочу добавить тень окна на .ui-dialog-titlebar при прокрутке в диалоговом окне. Что-то вроде этого: 
Вот мой код:Как добавить тень окна при прокрутке в диалоговом окне jquery
$(function(){
\t \t \t $("#dlg-vop").dialog({
\t \t \t autoOpen: false,
\t \t \t modal: true,
\t \t \t draggable: false,
\t \t \t width: 480,
\t \t \t maxHeight: 480,
\t \t \t closeText: "",
\t \t \t buttons: true,
\t \t \t dialogClass: "vop-dialog",
\t \t \t open: function() {
\t \t \t $("html").addClass("dialog-open");
\t \t \t $("#dlg-vop").scrollTop(0);
\t \t \t },
\t \t \t close: function() {
\t \t \t $("html").removeClass("dialog-open")
\t \t \t },
\t \t \t create: function(event, ui) {
\t \t \t var header = $('.ui-dialog-titlebar');
\t \t \t $(window).scroll(function(){
\t \t \t if($(window).scrollTop() <= 30){
\t \t \t header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
\t \t \t } else {
\t \t \t header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
\t \t \t }
\t \t \t });
\t \t \t }
\t \t \t });
\t \t \t $("#vop-opener").on("click", function() {
\t \t \t $("#dlg-vop").dialog("open");
\t \t \t return false;
\t \t \t });
\t \t \t });<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>
\t \t \t html.popup-open, html.popup-open body{overflow: hidden; height: auto; min-height: inherit;}
\t \t \t a{color:#000;}
\t \t \t .ui-widget-overlay{background-color: rgba(0,0,0,.5); opacity: 1;}
.ui-widget.ui-widget-content{border:0; padding:0;}
\t \t \t .ui-widget-header{border:0; background: 0 none; border-radius: 0;}
\t \t </style>
<a href="#" id="vop-opener">Open dialog</a>
\t \t
\t \t <div id="dlg-vop" class="vop" title="Test">
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t \t <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>
\t \t </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)');
}
});
Когда я использую его в другой элемент, не DialogBox это работает , К сожалению, я не знаю, как его изменить. Надеюсь, кто-то может мне помочь :)
это работает, спасибо много – pzoli
Отлично, вы могли бы отметить этот ответ, как принято тогда? –