Bootstrap 模态 - 简单的密码保护按钮

Question

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

js:

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

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

Answer 1

你可以用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()
})

Answer 2

您可以使用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;
    }
})

Bootstrap 模态 - 简单的密码保护按钮

Bootstrap Modal - Simple password protected button

javascript

php

password-protection