当字段为空时,在屏幕中间添加一个弹出框

Adding a pop-up box in the middle of the screen when fields are left blank

本文关键字:一个 添加 中间 字段 屏幕      更新时间:2023-09-26

到目前为止,这将在留空的字段中添加单词empty,但我需要在屏幕中间顶部添加一个弹出窗口,在其自己的自定义框中声明"请在提交前填写所有字段",我可以使用css对其进行更改。

这似乎是一件非常简单的事情,尽管我不知道怎么做。

如果下面的代码很糟糕,那就是我在练习中得到的,没有关于如何执行任务的文档。

我需要为弹出框创建一个div和一个执行它的函数吗?通过调用if语句中的函数。

如果我含糊其辞或毫无意义,我很抱歉,因为这对我来说还是很新鲜的(我相信这很明显,哈哈)

谢谢!

var requiredFields = [ "firstname", "lastname", "email", "message" ];
function checkContactForm() {
  var theForm = document.forms[ 0 ];
  for ( var i in requiredFields ) {
    var fieldName = requiredFields[ i ];
    if ( !theForm[ fieldName ].value || theForm[ fieldName ].value == "Error" ) {
      theForm[ fieldName ].style.color = "#f66";
      theForm[ fieldName ].value = "Error";

      var emptyFields = true; 
    } 
  }
  if ( !emptyFields ) { theForm.submit(); }
  }
 function resetField( theField ) {
    if ( theField.value == "Error" ) {
    theField.value = "";
  }
    theField.style.color = "#000";
  }

为什么不使用以下jquery ui对话框:http://jsfiddle.net/csdtesting/aL14evyk/

$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});