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>

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

$(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

Bootstrap模式不能像JS

1 个答案: