從條件javascript函數返回自定義對話框

-1

這是我的javascript函數，用於檢查上傳的文件是否爲圖像格式類型！目前我已經使用默認警報框來返回錯誤信息！從條件javascript函數返回自定義對話框

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];  
function Validate(oForm) { 
    var arrInputs = oForm.getElementsByTagName("input"); 
    for (var i = 0; i < arrInputs.length; i++) { 
     var oInput = arrInputs[i]; 
     if (oInput.type == "file") { 
      var sFileName = oInput.value; 
      if (sFileName.length > 0) { 
       var blnValid = false; 
       for (var j = 0; j < _validFileExtensions.length; j++) { 
        var sCurExtension = _validFileExtensions[j]; 
        if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { 
         blnValid = true; 
         break; 
        } 
       } 

       if (!blnValid) { 

        alert("Sorry a dig copy may be in a different file format! Formats allowed are " + _validFileExtensions.join(", ")); 

        return false; 
       } 
      } 
     } 
    } 

    return true; 
}

下面的代碼給出了我要打電話，而不是默認框自定義對話框

<style> 
      #white-background{ 
       display: none; 
       width: 100%; 
       height: 100%; 
       position: fixed; 
       top: 0px; 
       left: 0px; 
       background-color: #fefefe; 
       opacity: 0.7; 
       z-index: 9999; 
      } 

      #dlgbox{ 
       /*initially dialog box is hidden*/ 
       display: none; 
       position: fixed; 
       width: 480px; 
       z-index: 9999; 
       border-radius: 10px; 
       background-color: #7c7d7e; 

      } 

      #dlg-header{ 
       background-color:aliceblue; 
       color: white; 
       font-size: 20px; 
       padding: 10px; 
       margin: 10px 10px 0px 10px; 
      } 

      #dlg-body{ 
       background-color: white; 
       color: black; 
       font-size: 14px; 
       padding: 10px; 
       margin: 0px 10px 0px 10px; 
      } 

      #dlg-footer{ 
       background-color: #f2f2f2; 
       text-align: right; 
       padding: 10px; 
       margin: 0px 10px 10px 10px; 
      } 

      #dlg-footer button{ 
       background-color: grey; 
       color: white; 
       padding: 5px; 
       border: 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <!-- dialog box --> 
     <div id="white-background"> 
     </div> 
     <div id="dlgbox"> 
      <div id="dlg-header"></div> 
      <div id="dlg-body">Sorry a dig copy may be in a different file format! Formats allowed are ".jpg", ".jpeg", ".bmp", ".gif", ".png"</div> 
      <div id="dlg-footer"> 
       <button onclick="dlgLogin()">Ok</button> 
      </div> 
     </div> 

     <!-- rest of the page --> 
     <h1>Dialog Box Demo</h1> 
     <p>This is a dialog box example.</p> 
     <p>Feel free to experiment with the code.</p> 
     <p>Click the button below to see the dialog box.</p> 
     <button onclick="showDialog()">Click Me!</button> 

     <!-- script of dialog --> 
     <script> 
      function dlgLogin(){ 
       var whitebg = document.getElementById("white-background"); 
       var dlg = document.getElementById("dlgbox"); 
       whitebg.style.display = "none"; 
       dlg.style.display = "none"; 
      } 

      function showDialog(){ 
       var whitebg = document.getElementById("white-background"); 
       var dlg = document.getElementById("dlgbox"); 
       whitebg.style.display = "block"; 
       dlg.style.display = "block"; 

       var winWidth = window.innerWidth; 
       var winHeight = window.innerHeight; 

       dlg.style.left = (winWidth/2) - 480/2 + "px"; 
       dlg.style.top = "150px"; 
      } 
     </script>

請幫我的第二個代碼集成到第一代碼，這樣我可以返回自定義對話框而不是默認的警告框

來源

2016-09-18 Kasun Sampath

只需調用'showDialog（）'而不是'alert（）'。 – Barmar

您可以在這裏找到你的answere how to change the style of alert box

The alert box is a system object, and not subject to CSS. To do this style of thing you would need to create an HTML element and mimic the alert() functionality. The jQuery UI Modal box does a lot of the work for you, working basically as I have described: Link.

來源

2016-09-18 13:22:05

從條件javascript函數返回自定義對話框

回答

相關問題