这个效果做的倒是漂亮，不过没有考虑对话框的模式。
网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了南票免费建站欢迎大家使用！
一般来说 modal 模式才加遮罩，非 modal 就不加。
因此，弹出对话框的函数应该提供是否 modal 的参数。
直接改这个代码，不如用 jquery，jquery有很多优秀的对话框插件，完全不用这么费力。
可以看看以下这些
jQueryUI Dialog
colorbox
fancybox
DOM window
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效果，带遮罩层的实现方法如下：
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;
}
实现的效果：
这是一个打开网页 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()"。
