未顯示JavaScript彈出窗口

我想顯示一個彈出窗口，因爲已解釋，我無法添加一個窗口。這裏是JS後面的代碼HTML。未顯示JavaScript彈出窗口

我已經添加了一個按鈕，並點擊按鈕，我試圖顯示彈出。我能夠顯示沒有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 
        ] 
       }) 
      }); 
    }

來源

2017-08-30 Danny

您可以從 Bootstrap使用彈出功能。它有很好的文檔。

來源

2017-08-30 14:14:09

在使用它之前，您需要初始化彈出窗口。只要你願意，你可以做到這一點（例如，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

來源

2017-08-30 14:46:27 Hanna

即使鏈接可以回答這個問題，倒不如你提供額外的您的答案中有詳細信息，因爲鏈接往往變得無效。 –

@AlexM你是對的，改變它;） – Hanna

我能夠得到它，但與webix.ready（）我的代碼不起作用。對此有何建議？ – Danny

未顯示JavaScript彈出窗口

回答

相關問題