css位置:
/*************对话框操作**********************/
body.dialog-shown {
filter: blur(25dip);
foreground-color:rgba(0,0,0,0.1);
transition: foreground-color(linear,400ms);
}
div.dialog-frame > caption{
padding:0 5dip;
color: #fff;
}
/* dialog "window" frame */
div.dialog-frame
{
position:absolute;
font: system;
width: 400dip;
height: 220dip;
min-width: min-content;
left: *;
right: *;
top: 0.4*;
bottom: 0.6*;
background: #fff;
outline:1dip solid #1FD0D9;
}
/* dialog body element */
div.dialog-frame > :nth-child(2)
{
height: *;
padding: 20dip;
vertical-align:middle;
text-align:center;
}
/* dialog button bar */
div.dialog-frame > text.buttons
{
margin:20dip 20dip 20dip *;
width: max-intrinsic;
white-space: nowrap;
flow:horizontal;
}
html位置:
<body #HomeCopy >
<form #simple-dialog caption="标题!" >
<p #test name="MyTest">准备修改</p>
//可以添加多个再初始化里面调用
</form>
</body>
脚本位置:
function dialog(params)
{
stdout.println("第一次进来1");
// init phase, build markup
var body = params.body || "Nothing to say, eh?";
stdout.println("赋值 body ="+body);
var body_html = "";
var caption;
if( body !instanceof Element )
{
stdout.println("第一次进来2");
body_html = "<div.body>" + body.toString() +"</div>";
body = null;
caption = params.caption || "?";
}
else
{
stdout.println("第一次进来3");
caption = body.@#caption || params.caption || "?";
}
var buttons = params.buttons ||
[ { caption:"Cancel", role:#cancel, class:"button-cancel2", value:false },
{ caption:"OK", role:#ok, class:"ok-button", value:true }
];
var buttons_html = "";
for(var button_def in buttons) {
var cls = button_def.class ? ("." + button_def.class) : "";
buttons_html += String.printf("<button%s>%s</button>", cls, button_def.caption || "");
}
stdout.println("出现按钮界面");
var html =
"<div.dialog-frame >"
"<caption .tips-top>" + caption + "</caption>"
+ body_html +
"<text.buttons >" + buttons_html + "</text>"
"</div>";
self.append(html);
assert self.last.$is(div.dialog-frame);
var dlg = self.last; // our dialog layer
var prev_parent = null;
var prev_index;
stdout.println("出现按钮界面 2");
if( !body )
{
body = dlg.$(div.body); // if we've got dialog body as an html text
stdout.println("出现按钮界面 body ="+body);
}
else
{
// if we've got dialog body as a reference of existing Element
prev_parent = body.parent;
prev_index = body.nodeIndex;
dlg.insert(body,1); // insert it after the <caption>
}
var ret_val = null; // value to return
function handleValue(button_val)
{
if( typeof button_val == #function)
{ // if it is a function, call it with the body element reference 如果它是一个函数,则使用body元素引用调用它
ret_val = button_val(body);
if(ret_val)
body.state.collapsed = true; // to signal that we are done with it.
}
else
{
ret_val = button_val;
body.state.collapsed = true; // to signal that we are done with it.
}
}
// setup control event handler 设置控制事件处理程序
dlg.onControlEvent = function(evt)
{
if( evt.type != Event.BUTTON_CLICK || !evt.target.$is(div.dialog-frame > text.buttons > button))
{
return;
}
//evt.target is a button on text.buttons bar evt。目标是文本上的一个按钮。按钮栏
var button_val = buttons[evt.target.index].value;
stdout.println("button_val = "+button_val);
handleValue(button_val);
return true;
}
// setup keyboard event handler 各种事件处理监听
dlg.onKey = function(evt)
{
if( evt.type != Event.KEY_DOWN)
{
return;
}
var cmd;
if( evt.keyCode == Event.VK_ESCAPE )
{
cmd = #cancel;
}
else if( evt.keyCode == Event.VK_RETURN )
{
cmd = #ok;
}
else
{
return; // we handle only ESCAPE and ENTER here.
}
for( var button_def in buttons )
{
if( button_def.role == cmd )
{
handleValue(button_def.value);
return true;
}
}
}
if( params.initial )
{
body.value = params.initial;
}
// and finally run the modal loop: 最后运行模态循环:
body.state.expanded = true;
//view.update();
var docBody = $(body);
docBody.attributes.addClass("dialog-shown"); //添加名字
var sfocus = view.focus;
view.eventsRoot = dlg; //让界面无法其他操作
stdout.println("dlg = "+dlg);
while (dlg.isVisible && !body.state.collapsed && view.state != View.WINDOW_HIDDEN)
{
view.doEvent();
}
view.eventsRoot = null;
view.focus = sfocus;
if(prev_parent) //we were using existing DOM element so put it back
{
prev_parent.insert(body,prev_index);
}
dlg.remove(); // remove it from the DOM
docBody.attributes.removeClass("dialog-shown"); //删除名字
if(params.returns == #values && ret_val == #ok)
{
return body.value;
}
return ret_val;
}
调用:
// show the dialog:
var res = dialog { body:$(form#data-dialog),
returns: #values,
initial: { //有多个窗口输出再这里调用//initial:{#MyTest:MyText, #MyHtml:"第二个输出初始化", }}
#secret-wish:"I actually wanted the Sciter but got that .NET\nCan I finally get it? Santa, please!",
#gender :"male",
#birthday :new Date("1955-10-28"),
#last-name :"Gates",
#first-name :"Bill"
}
buttons: [ { caption: "Yep!", role:#ok, value:true },
{ caption: "Apply!", value: onApply },
{ caption: "No way!", role:#cancel, value:false } ]
};
列子再官方文档:sciter-sdk-master\samples\ideas\lightbox-dialog
sciter-sdk-master\samples\ideas\lightbox-dialog-doc-modal