javascript - Bootstrap 模式不能按预期与 JS 一起工作

Question

我有一段简单的代码，它没有按照我预期的方式工作。我正在尝试创建一个模式，该模式将在页面打开或不打开时立即打开(如果密码存在或不存在)。它会询问密码，只有在密码正确时才会关闭。

JS :

$(window).load(function(){
    $("#error").hide();
    $('#passwordModal').modal({
        backdrop: 'static'
    });
    var password  = '<?php echo $samples->password;?>';
    password = null;
    if(password !== null){
        console.log(password !== null);
        $('#passwordModal').modal('show'); 
    }
    $('#passwordModal').on('hide.bs.modal', function(e){
        var password  = '<?php echo $samples->password;?>';
        if($('#psw').val() !== password ) {
            $("#error").show();
            e.preventDefault();
            e.stopImmediatePropagation();
            return false; 
        }
    });

});
</script>

HTML :

<div class="container">
<?php echo $samples->password;?>
  <!-- Modal -->
  <div class="modal fade" id="passwordModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Please enter survey password</h4>
        </div>
        <div class="modal-body">
            <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
            <input type="text" class="form-control" id="psw" placeholder="Enter password">
            <div class="alert alert-danger" id="error">
                Sorry, wrong password. Please try again to continue!
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Enter</button>
        </div>
      </div>      
    </div>
  </div> 
</div>

目前它会在我加载页面时始终打开模式，并且在我按回车键时不检查密码它不检查输入的密码是否等于实际密码。

编辑(让它工作):

if(password){
        console.log(password !== null);
        $('#passwordModal').modal('show'); 
        $('#passwordModal').modal({
            backdrop: 'static'
        });

新编辑:最佳答案请查看@Shehary 评论

Answer 1

正如评论中所建议的那样，

移除

$('#passwordModal').modal({
    backdrop: 'static'
});

这解决了问题目前它总是在我加载页面时打开模式

对于 backdorop，在模态定义本身中包含数据属性 data-keyboard="false"data-backdrop="static":

<div class="modal fade" id="passwordModal" role="dialog" data-keyboard="false" data-backdrop="static">
    // Modal HTML Markup
</div>

检查输入的密码是否等于实际密码。在输入和 if/else 条件下使用 change 事件，如果密码不匹配，则显示错误，否则关闭模式

$(window).load(function(){
    $("#error").hide();
    var password  = '123123';
    //password = null;
    if(password == "123123"){
        $('#passwordModal').modal('show').on('shown.bs.modal', function(){
            var passwordcheck  = '123123';
            $('#psw').change(function() {
                if($(this).val() !== passwordcheck ) {
                    $("#error").show();
                } else {
                    $('#passwordModal').modal('hide');
                }
            });
        });
    }
});

Fiddle Example