如何在 jquery 对话框中滚动时添加框阴影

Question

我想在对话框中滚动时在 .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 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;}
  </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)'); 
                        }
                    });

当我在其他元素而不是对话框中使用它时，它起作用了。不幸的是我不知道如何修改它。我希望有人能帮助我:)

Answer 1

问题实际上是您在 $(window).scroll 滚动而不是 JQuery 对话框 ($('#dlg-vop').scroll) 上调用函数。试试下面更新的代码段。

$(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 对话框中滚动时添加框阴影

how to add box shadow when scrolling in jquery dialog

jquery

jquery-ui

dialog

jquery-ui-dialog