高分-JavaScript代碼修改，去掉遮罩層效果。

這個(gè)效果做的倒是漂亮，不過沒有考慮對話框的模式。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了南票免費(fèi)建站歡迎大家使用！

一般來說 modal 模式才加遮罩，非 modal 就不加。

因此，彈出對話框的函數(shù)應(yīng)該提供是否 modal 的參數(shù)。

直接改這個(gè)代碼，不如用 jquery，jquery有很多優(yōu)秀的對話框插件，完全不用這么費(fèi)力。

可以看看以下這些

jQueryUI Dialog

colorbox

fancybox

DOM window

JavaFX界面半透明遮蓋怎么整

stage = new Stage();

stage.initModality(Modality.APPLICATION_MODAL);

stage.initStyle(StageStyle.TRANSPARENT);//這是讓彈出窗口透明，如果不設(shè)置stage透明，stackpane再怎么設(shè)置也沒用。

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中間一塊區(qū)域里放輸入對話框，結(jié)果輸入部分還是半透明的效果，還未能解決

追加----換了下實(shí)現(xiàn)方式，就是在primaryStage布局中用stackpane，在stackpane的children中添加一個(gè)半透明的pane，Pane fx:id="main_mask" style="-fx-border-radius:8px;-fx-opacity: 0.4;-fx-background-color: black ;" visible="false" /，默認(rèn)不顯示；在顯示彈出的stage時(shí)，再通過代碼設(shè)置main_mask顯示，在關(guān)閉彈出stage時(shí)，隱藏main_mask，這樣能達(dá)到想要的效果了，但是這樣的缺點(diǎn)是不通用，組件不獨(dú)立，想辦法改進(jìn)中

jsp實(shí)現(xiàn)loading效果（遮罩層）

jsp中實(shí)現(xiàn)loading效果，帶遮罩層的實(shí)現(xiàn)方法如下：

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;

}

實(shí)現(xiàn)的效果：

js代碼定時(shí)關(guān)閉遮罩層，小白求教Javascript代碼

這是一個(gè)打開網(wǎng)頁 30秒后自動(dòng)彈出紅色的遮罩層，5秒后遮罩層自動(dòng)關(guān)閉。

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

關(guān)于移植：在你想要彈出遮罩層的頁面修改。按照頁面結(jié)構(gòu)把對應(yīng)標(biāo)簽的內(nèi)容復(fù)制到你要修改的頁面中。例如body/body的內(nèi)容復(fù)制到body/body里面。再將 body 改成body?onload="load()"。