Bootstrap Modal - 简单的密码保护按钮答案

【问题标题】：Bootstrap Modal - Simple password protected buttonBootstrap Modal - 简单的密码保护按钮
【发布时间】：2021-02-06 11:56:46
【问题描述】：

我有一个带有模式的页面。在 modal 里面，我有两个按钮。 Close 和 Save Changes。我正在尝试在按下Save Changes 按钮时添加一个受保护的简单密码。用户按下按钮并弹出一个只有密码的窗口。如果密码正确，则继续其余代码。其他警报消息。

js:

$('#UpdateForm').submit(function(event) {
    if ($pass=="pass") {
        echo "Rest Code Here";
    } else {
        echo "Wrong!";
    }
}

我认为代码会这样。如何添加弹出窗口并使其工作。它受到简单保护，不像本地使用那样安全。

【问题讨论】：

如果安全性不重要，为什么还要使用密码？你可以简单地问“你真的要保存这个吗？”。我之所以这么说是因为您已经在 Javascript 中实现了密码检查，换句话说，在公共代码中，任何人都可以轻松更改。
@KIKOSoftware 恐怕用户会按保存。密码更好。它是本地应用程序，使用简单。

标签： javascript php password-protection

【解决方案1】：

您可以使用Window prompt() Method。 prompt() 方法显示一个对话框，提示访问者输入。

如果您希望用户在进入页面之前输入一个值，通常会使用提示框。

注意：当弹出提示框时，用户必须在输入值后单击“确定”或“取消”才能继续。不要过度使用此方法，因为它会阻止用户在关闭框之前访问页面的其他部分。

w3schools.com - Window prompt() Method

你可以试试下面的代码：

$('#UpdateForm').submit(function(event) {
    y = prompt("Please insert code to continue.");
    if (y == "pass") {
        alert("Rest Code Here");
    } else {
        alert("Wrong!");
        //Stop closing modal
        return false;
    }
})

【讨论】：

【解决方案2】：

你可以使用SweetAlert2来做

请看这里https://codepen.io/5hiny/pen/PobNbGQ

Swal.fire({
  title: 'Enter password to save',
  input: 'text',
  showCancelButton: true,
  confirmButtonText: 'Submit',
  showLoaderOnConfirm: true,
  preConfirm: (pass) => {
    if (pass == 'password') {
      document.write("SAVE");
    } else {
      document.write("FAIL");
    }
  },
  allowOutsideClick: () => !Swal.isLoading()
})

【讨论】：