java遮罩层代码 java面板

高分-JavaScript代码修改，去掉遮罩层效果。

这个效果做的倒是漂亮，不过没有考虑对话框的模式。

一般来说 modal 模式才加遮罩，非 modal 就不加。

因此，弹出对话框的函数应该提供是否 modal 的参数。

直接改这个代码，不如用 jquery，jquery有很多优秀的对话框插件，完全不用这么费力。

可以看看以下这些

jQueryUI Dialog

colorbox

fancybox

DOM window

JavaFX界面半透明遮盖怎么整

stage = new Stage();

stage.initModality(Modality.APPLICATION_MODAL);

stage.initStyle(StageStyle.TRANSPARENT);//这是让弹出窗口透明，如果不设置stage透明，stackpane再怎么设置也没用。

FXML:

StackPane

style="-fx-border-radius:8px;-fx-opacity: 0.4;-fx-background-color: black ;"

xmlns="Java SE | Oracle Technology Network" xmlns:fx="Java SE | Oracle Technology Network"

fxml里用css样式 -fx-opacity: 0.4;控制stackpane半透明

以上方法stage显示后是半透明遮罩效果，但是我想要在stackpane中间一块区域里放输入对话框，结果输入部分还是半透明的效果，还未能解决

追加----换了下实现方式，就是在primaryStage布局中用stackpane，在stackpane的children中添加一个半透明的pane，Pane fx:id="main_mask" style="-fx-border-radius:8px;-fx-opacity: 0.4;-fx-background-color: black ;" visible="false" /，默认不显示；在显示弹出的stage时，再通过代码设置main_mask显示，在关闭弹出stage时，隐藏main_mask，这样能达到想要的效果了，但是这样的缺点是不通用，组件不独立，想办法改进中

jsp实现loading效果（遮罩层）

jsp中实现loading效果，带遮罩层的实现方法如下：

var MaskUtil = (function(){

  var $mask,$maskMsg;

  var defMsg = '正在处理，请稍待。。。';

  function init(){

      if(!$mask){

          $mask = $("div class=\"datagrid-mask mymask\"/div").appendTo("body");

      }

      if(!$maskMsg){

          $maskMsg = $("div class=\"datagrid-mask-msg mymask\""+defMsg+"/div")

              .appendTo("body").css({'font-size':'12px'});

      }

      $mask.css({width:"100%",height:$(document).height()});

      $maskMsg.css({

          left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2,

      });

  }

  return {

      mask:function(msg){

          init();

          $mask.show();

          $maskMsg.html(msg||defMsg).show();

      }

      ,unmask:function(){

          $mask.hide();

          $maskMsg.hide();

      }

  }

}());

需要用到的css样式：

.datagrid-mask-msg {

position: absolute;

top: 50%;

margin-top: -20px;

padding: 12px 5px 10px 30px;

width: auto;

height: 16px;

border-width: 2px;

border-style: solid;

display: none;

}

实现的效果：

js代码定时关闭遮罩层，小白求教Javascript代码

这是一个打开网页 30秒后自动弹出红色的遮罩层，5秒后遮罩层自动关闭。

html

    body onload="load()"

    div id="zzDiv" style="width:100%;height:100%;opacity:0.5;background-color:#ccc;display:none;position: fixed;z-index:9999;"遮罩层/div

    ndndndndnddnnd

    script type="text/javascript"

    function load(){

         setTimeout(showDiv,3000);

}

function showDiv(){

    document.getElementById("zzDiv").style.display="block";

    setTimeout(hideDiv,5000);

}

function hideDiv(){

   document.getElementById("zzDiv").style.display="none";

}

/script

/body

/html

关于移植：在你想要弹出遮罩层的页面修改。按照页面结构把对应标签的内容复制到你要修改的页面中。例如body/body的内容复制到body/body里面。再将 body 改成body onload="load()"。