javascript：如何添加'模态'div，或者至少延迟直到完成阅读

我有一些表单，有些字段。如果某些字段未填写 - 我想显示警报。如果其他字段未填写 - 我想显示“软警告”并继续提交表单。javascript：如何添加'模态'div，或者至少延迟直到完成阅读

当我使用JavaScript警报窗口 - 一切运作良好。

当我使用show \隐藏DIV与我的消息，表单提交之前，用户设法读取消息。

我试图使用setTimeout但它不起作用。

任何想法？

similiar的问题，但没有 '软警报'： Onclick validate form, if valid only submit form jQuery Modal that appears on form submit

我的JavaScript代码：

// - - - - - - - - 
    // - $popUp alert: 
    // - - - - - - - - 
    $('#popUpCloseBtn').click(function() { 
     $('#popUpMainText').html(''); 
     $('#popUpHeaderText').html(''); 
     $('#popUpContainer').css("display", "none"); 
    }); 

    function popUpShow() { 
     var popUpObj = document.getElementById("popUpContainer"); 
     popUpObj.style.display = "block"; 

     var topPos = 200; // ($(window).height()/2) - (popUpObj.offsetHeight/2); 
     var leftPos = ($(window).width()/2) - (popUpObj.offsetWidth/2); 

     popUpObj.style.top = topPos + "px"; 
     popUpObj.style.left = leftPos + "px"; 

    } 

    function showAlert(htmlTitle, htmlText, isErr) { 
    if (isErr) { 
     $('#popUpMainText').addClass("popUpTextError").removeClass("popUpTextSuccess"); 
    } else { 
     $('#popUpMainText').addClass("popUpTextSuccess").removeClass("popUpTextError"); 
    } 
    $('#popUpMainText').html(htmlText); 
    $('#popUpHeaderText').html(htmlTitle); 
    popUpShow(); 
    } 


    // - - - - - - - - 
    // - submit form: 
    // - - - - - - - - 

    $("#Save").click(function(){ 
     return SaveSubmit(); 
    }); 


    function SaveSubmit() { 

     var isEmptyField1 = (document.getElementById('f1').value.trim() == '') 
     var isEmptyField2 = (document.getElementById('f2').value.trim() == '') 

     var strErr = ""; 
     if (isEmptyField1) { 
     strErr += "<b>WARNING ! YOU CAN NOT CONTINUE.</b>" + "<br />"; 
     strErr += "The following fields are empty, please enter them to continue:" + "<br />"; 
     strErr += "field 1 <br />"; 
     strErr += "field 2 <br />"; 

     // alert(strErr); 
     var popUpTitle = "Alert"; 
     var popUpText = strErr; 
     var popUpIsErr = true; 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     return false; 
     } 

     if (isEmptyField2) { // 'soft-alert' : 
     strErr += "FOR INFORMATION ! The following fields are empty: " + "<br />"; 
     strErr += "field 3 \n"; 
     strErr += "field 4 \n"; 

     // alert(strErr); 
     var popUpTitle = "Alert"; 
     var popUpText = strErr; 
     var popUpIsErr = false; 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     setTimeout(function() { 
      var x = " // wait a little, so the user can read the message"; 
      document.form_display.submit(); 
      return true; 
     }, 20 * 1000); // It does not wait 20 seconds!!! 
     // do not return false! 
     } 


     // If gets here, all is ok . . . 
     document.form_display.submit(); 
     return true; 
    }

我的HTML代码：

 <FORM . . .> 
      . . . 
      <input type="submit" name="Save" id="Save" value="Enregistrer" > 
    </FORM> 


<div id="popUpContainer" class="popUpContainer"> 
     <div class="popUpHeader" ><span id="popUpHeaderText" ></span></div> 
     <div class="popUpMain" ><span id="popUpMainText"></span></div> 
     <div class="popUpFooter" ><input id="popUpCloseBtn" type="submit" value="Close" /></div> 
</div>

来源

2017-02-20 Atara

观看[问题]（http://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-取消提交 - 对话盒）！我认为它可以帮助你解决问题！ – TeemoBiceps

您需要使用类似的东西，以防止在所有检查有效之前提交表单 '$（“＃Save”）。click（function（e）{. 0127}}} }）; ' –

@TeemoBiceps - 如果我使用JavaScript警报，它是模式窗口，并且一切正常。如何让我自己的wDIV表现为模态？ – Atara

我改变了代码： SaveSubmit（）不提交表单。而不是为软警报特殊的“关闭”按钮提交：

$('#popUpCloseBtn').click(function() { 
    popUpClose(); 
    }); 
    $('#popUpCloseAndSaveBtn').click(function() { 
    // popUpClose(); 
    document.form_display.submit(); 
    }); 

    function showAlert(htmlTitle, htmlText, isErr) { 
    if (isErr) { 
     $('#popUpCloseBtn').css("display", "block"); 
     $('#popUpCloseAndSaveBtn').css("display", "none");  
    } else { 
     $('#popUpCloseAndSaveBtn').css("display", "block"); 
     $('#popUpCloseBtn').css("display", "none");  
    } 
    . . . 

    function SaveSubmit() { 
    . . . 
    if (isEmptyField2) { 
    . . . 
     showAlert(popUpTitle, popUpText, popUpIsErr); 
     return false; // the DIV.closeAndSaveBtn will submit the form

来源

2017-02-22 18:05:50 Atara

javascript：如何添加'模态'div，或者至少延迟直到完成阅读

回答

相关问题