sciter 自定义对话框

  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位置：

 
         
            

准备修改

//可以添加多个再初始化里面调用
         

 

 

脚本位置：

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 = "" + body.toString() +"

";
    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("%s", cls, button_def.caption || "");
  }

  stdout.println("出现按钮界面");
  var html =
    ""
      "" + caption + ""
      + body_html +
      "" + buttons_html + ""
    "

";
 
  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
  }  
 
  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