Question

我正在尝试按照说明显示弹出窗口，但我无法添加一个弹出窗口。这是JS后面的代码HTML。

我添加了一个按钮，点击按钮我试图显示弹出窗口。我能够在没有webix.ready（）函数的情况下显示弹出窗口，但是当我尝试添加我的代码中断时。任何有关这方面的帮助都会有所帮助。

HTML CODE:
    <body>
            <div class="loader-holder" id="loader-holder">
                <div class="loader-container">
                    <p>Loading......</p>
                </div>
            </div>
        </body>
JS CODE:

    var form = {
                view:"form",
                borderless:true,
                elements: [
                    { view:"text", label:'Login', name:"login" },
                    { view:"text", label:'Email', name:"email" },
                    { view:"button", value: "Submit", click:function(){
                        if (this.getParentView().validate()){ //validate form
                            webix.message("All is correct");
                            this.getTopParentView().hide(); //hide window
                        }
                        else
                            webix.message({ type:"error", text:"Form data is invalid" });
                    }}
                ],
                rules:{
                    "email":webix.rules.isEmail,
                    "login":webix.rules.isNotEmpty
                },
                elementsConfig:{
                    labelPosition:"top",
                }
            };

    function showForm(winId, node){
                console.log(node);
                $$(winId).getBody().clear();
                $$(winId).show(node);
                $$(winId).getBody().focus();
            }

    var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};

    function Start(){
        var tbl = {

        }

        var cfg = {
                container:"listC",
                width:1500,
                height:600,
                rows:[
                    {
                        height: 35,
                        view:"toolbar",
                        elements:[
                            {view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
                        ]
                    },


                    { view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", popup)}},

            ]
        }

        /////////////////////////////////
        var bodycontent =
        {
            id:"tb", autoheight:true,autowidth:true,
            view:"tabview",
                cells:[
                  {
                    header:"LIVE",
                    body: tbl
                  },
                  {
                    header:"REMOTE WATCH",
                    body: { id:"remote_watch", template:"some_text"}
                  },
                  {
                    header:"CONFIG",
                    body:cfg//{ id:"config", template:"CONFIG is In developement........"}
                  } ]
        }

        var label = { view:"label",  label:'some_text ',height:25, align:"left",css:"my_style"}

        webix.ready(function ()
            {
                var el = document.getElementById('loader-holder');
                el.parentNode.removeChild(el);
                webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
                webix.ui(
                {
                    view: "layout",
                    id: "dashboard",
                    rows:
                    [
                    label,
                    bodycontent
                    ]
                })
            });
    }

Answer 1

您可以使用弹出功能 Bootstrap。它有很好的文档。

Answer 2

您需要在使用之前初始化弹出窗口。你可以在任何你想要的地方做到（例如webix.ready（），“showForm”功能）

var form = {
  view:"form",
  borderless:true,
  elements: [
    { view:"text", label:'Login', name:"login" },
    { view:"text", label:'Email', name:"email" },
    { view:"button", value: "Submit", click:function(){
      if (this.getParentView().validate()){ //validate form
        webix.message("All is correct");
        this.getTopParentView().hide(); //hide window
      }
      else
        webix.message({ type:"error", text:"Form data is invalid" });
    }}
  ],
  rules:{
    "email":webix.rules.isEmail,
    "login":webix.rules.isNotEmpty
  },
  elementsConfig:{
    labelPosition:"top",
  }
};

function showForm(winId, node){
  webix.ui(popup);
  $$(winId).getBody().clear();
  $$(winId).show(node);
  $$(winId).getBody().focus();
}

var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};

function Start(){
  var tbl = {

  }

  var cfg = {
    container:"listC",
    width:1500,
    height:600,
    rows:[
      {
        height: 35,
        view:"toolbar",
        elements:[
          {view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
        ]
      },


      { view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", this.$view)}},

    ]
  }

  /////////////////////////////////
  var bodycontent =
  {
    id:"tb", autoheight:true,autowidth:true,
    view:"tabview",
    cells:[
      {
        header:"LIVE",
        body: tbl
      },
      {
        header:"REMOTE WATCH",
        body: { id:"remote_watch", template:"some_text"}
      },
      {
        header:"CONFIG",
        body:cfg//{ id:"config", template:"CONFIG is In developement........"}
      } ]
  }

  var label = { view:"label",  label:'some_text ',height:25, align:"left",css:"my_style"}

  webix.ready(function ()
  {
    var el = document.getElementById('loader-holder');
    el.parentNode.removeChild(el);
    webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
    webix.ui(
        {
          view: "layout",
          id: "dashboard",
          rows:
              [
                label,
                bodycontent
              ]
        })
  });
}

Start();

https://webix.com/snippet/459c4dd6

JavaScript PopUp未显示

2 个答案: