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

我有一个带有一些字段的表单。 如果某些字段没有填写-我想显示一个警报。 如果没有填写其他字段-我想显示“软警报”并继续提交表单

当我使用javascript警报窗口时，一切都很好

当我在邮件中使用show\hide DIV时，表单会在用户试图阅读邮件之前提交

我试图使用

setTimeout

，但它不起作用

有什么想法吗

类似的问题，但没有“软警报”：

我的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;
    }

/-----
//-$popUp警报：
// - - - - - - - -
$（'popUpCloseBtn'）。单击（函数（）{
$（'#popUpMainText'）.html（''）；
$（'#popText'）.html（''）；
$（'popUpContainer'）.css（“显示”、“无”）；
});
函数popUpShow（）{
var popUpObj=document.getElementById（“popUpContainer”）；
popUpObj.style.display=“块”；
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”；
}
函数showAlert（HTMLTTLE、htmlText、ISER）{
if（ISER）{
$（'popUpMainText'）.addClass（“PopupExterRor”）.removeClass（“PopupExtSuccess”）；
}否则{
$（'popUpMainText'）.addClass（“popUpTextSuccess”）.removeClass（“PopupExterRor”）；
}
$（'popUpMainText'）.html（htmlText）；
$（'#popReaderText'）.html（htmlTitle）；
popUpShow（）；
}
// - - - - - - - -
//-提交表格：
// - - - - - - - -
$（“#保存”）。单击（函数（）{
返回SaveSubmit（）；
});
函数SaveSubmit（）{
变量isEmptyField1=（document.getElementById（'f1'）。value.trim（）=''）
变量isEmptyField2=（document.getElementById（'f2'）。value.trim（）
var strErr=“”；
如果（isEmptyField1）{
strErr+=“警告！您不能继续。”+“
”；
strErr+=“以下字段为空，请输入以继续：“+”
”；
strErr+=“字段1
”；
strErr+=“字段2
”；
//警报（strErr）；
var poputtle=“警报”；
var popUpText=strErr；
var popupiser=true；
showAlert（popUpTitle、popUpText、PopupSiser）；
返回false；
}
如果（isEmptyField2）{/'软警报'：
strErr+=”以获取信息！以下字段为空：“+”
”；
strErr+=“字段3\n”；
strErr+=“字段4\n”；
//警报（strErr）；
var poputtle=“警报”；
var popUpText=strErr；
var popupiser=false；
showAlert（popUpTitle、popUpText、PopupSiser）；
setTimeout（函数（）{
var x=“//请稍等，以便用户可以阅读消息”；
document.form_display.submit（）；
返回true；
}，20*1000）；//它不会等待20秒！！！
//不要返回错误！
}
//如果你到了这里，一切都好。
document.form_display.submit（）；
返回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>

. . . 

我更改了代码： 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

---

退房我认为它可以帮助你解决你的问题！您需要使用类似的方法，以防止在所有检查都有效之前提交表单@TeemoBiceps-如果我使用JavaScript警报，它是一个模式窗口，并且一切正常。如何使自己的wDIV表现为模态？