Bootstrap modal 不能按预期与 JS 一起工作答案

【问题标题】：Bootstrap modal does not work as intended with JSBootstrap modal 不能按预期与 JS 一起工作
【发布时间】：2016-02-10 18:07:20
【问题描述】：

我有这段简单的代码，但它并没有按照我的预期工作。我正在尝试创建一个模式，该模式将在页面打开或不打开时立即打开（如果密码存在或不存在）。它会要求输入密码，只有在密码正确时才会关闭。

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 评论

【问题讨论】：

第一步，删除这个$('#passwordModal').modal({backdrop: 'static'});，看看能不能解决问题Currently it will always open the modal when I load the page
@Shehary 好的，这行得通，但我仍然需要背景。
背景<div class="modal fade" id="passwordModal" role="dialog" data-keyboard="false" data-backdrop="static">
看看这是否解决了所有问题jsfiddle.net/s9hce7fw/1
@Shehary 感谢您的帮助 :)

标签： javascript jquery html twitter-bootstrap bootstrap-modal

【解决方案1】：

按照 cmets 的建议，

删除

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

【讨论】：