Question

我需要调用函数来设置JavaScript警报的样式，来自另一个JavaScript函数，它会输出警报和验证。

但是在添加样式化函数之后，它既没有样式也没有验证数据。

function styledAlert() {
  this.render = function(messageToDisplay) {
    var winH = window.innerHeight;
    var winW = window.innerWidth;
    var divW = document.getElementById("dialogBox").offsetWidth;

    var dialogBoxOverLay = document.getElementById('dialogBoxOverLay');
    var dialogBox = document.getElementById('dialogBox');

    dialogBoxOverLay.style.display = "block";
    dialogBoxOverLay.style.height = winH + "px";

    dialogBox.style.left = ((winW - divW) * 0.5) + "px";
    dialogBox.style.top = "200px";
    dialogBox.style.display = "block";

    document.getElementById('dialogBoxBody').innerHTML = messageToDisplay;
  }

  this.ok = function() {
    document.getElementById('dialogBoxOverLay').style.display = "none";
    document.getElementById('dialogBox').style.display = "none";
  }
}


function signupDataValidation() {
  var password = document.forms["signupForm"]["password"].value;
  var confirmPassword = document.forms["signupForm"]["confirmPassword"].value;

  if (password == confirmPassword) {
    return true;
  } else {
    var sAlert = new styledAlert();
    sAlert.render("Password confirmation doesn't match Password.");
    return false;
  }

}

#dialogBoxOverLay {
  display: none;
  opacity: 0.8;
  position: fixed;
  top: 0px left: 0px;
  width: 100%;
  z-index: 10;
}
#dialogBox {
  display: none;
  position: fixed;
  z-index: 10;
}
#dialogBox > div {
  display: table;
}

<body>
  <div id="dialogBoxOverLay"></div>
  <div id="dialogBox">
    <div>
      <table>
        <tr>
          <td id="dialogBoxBody"></td>
        </tr>
        <tr>
          <td id="dialogBoxButton">
            <button type="button" id="OkButton" onclick="sAlert.ok()">OK</button>
          </td>
        </tr>
      </table>
    </div>
  </div>

  <form id="signupForm" name="signupForm" onsubmit="return signupDataValidation()">
    <input id="password" name="password" type="password" required/>
    <input id="confirmPassword" name="confirmPassword" type="password" required/>
    <button id="submitBtn" type="submit">Sign Up</button>
  </form>
</body>

如何从另一个函数调用样式的JavaScript模式？

0 个答案: