AngularJS:使用css媒体查询调整屏幕大小

agxfikkp  于 2022-10-31  发布在  Angular
关注(0)|答案(2)|浏览(168)

我有一个现有的CSS,它做媒体查询,并显示一个消息框时,屏幕大小调整到一定的大小。我希望消息框消失后5秒。
知道如何在AngluarJs中实现吗?

CSS格式:

@media all and (max-width: 1024px), all and (max-height: 760px) {
  div#bestview {
    display: block;
    position:fixed;
    z-index: 9999; /* above everything else */
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-image: url(../img/transpBlack75.png);
  }
}

HTML格式:

<div id="bestview">The selected browser size is not optimal for.....</div>
cczfrluj

cczfrluj1#

您可以执行以下操作:

// make a directive in your app : 

    youApp.directive('hideme',function(){
       return{
          restrict:'A',
          link:function(scope,elem,att){
             var timeout = att.hideme*1; // *1 to convert it to integer:(
             setTimeout(function(){
                 elem.addClass('hidden');
              },timeout);
          }
       }
     });

     // in your css : 

       .hidden{
         display:none
     }

     // in your html:

     <div hideme="5000" id="bestview">The selected browser size is not optimal for.....</div>
t9aqgxwy

t9aqgxwy2#

我做的和xe4me给出的答案稍有不同,我想我还是会把我做的贴在这里:
CSS:

@media all and (max-width: 1024px),
       all and (max-height: 760px) {
    div#bestview {
      display: block;
      position: fixed;
      z-index: 9999; /* above everything else */
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: url(../img/transpBlack75.png);
    }
  }

Angular JS:

app.directive('bestView', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      scope.$watch(
        function() {
          return elem.is(':visible');
        },
        function(newval) {
          if(newval == true) {
            $timeout(function() {
              elem.remove();
            }, 5000); //disappear after 5 seconds
          }
        }
      );
    }
  };
});

于飞:

<div id="bestview" best-view>The selected browser size is not optimal for.....</div>

相关问题