根据发现的错误显示不同的Bootstrap警报消息?

时间:2014-09-15 12:06:18

标签: javascript php jquery css twitter-bootstrap

我不确定如何举例说明,但这里就是这样!

我想在我正在创建的网站中添加提醒消息。例子可以在这里找到:

Examples of Alert Messages

根据表单的输入,我想显示不同的消息。所以php会检查选择的输入和字段是否正确。

消息示例:

1)警报危险 - 密码长度必须介于6到16个字符之间,并包含字母和数字

2)警告警告 - 更新您的个人资料。

我希望所有这些消息都显示在同一个div标签中 - message-warning-display。

<div class="message-warning-display" display:"hide">
      <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> There was a problem with your network connection.
      </div>
</div>

我想这是用php调用一个特殊的JavaScript函数调用然后显示消息/将显示设置为show而不是hide。

1 个答案:

答案 0 :(得分:0)

这样做的一种方式是:

将此内容添加到HTML:

<div id="alert" class="message-danger-display" style="display:none">
      <div class="alert alert-warning">
         <a href="#" class="close" data-dismiss="alert">&times;</a>
         <p></p>
     </div>
 </div>

你的JQUERY PART

$('YOUR FORM').submit(function(e){
     $('#alert').attr('style','display:none');  
     $('#alert .alert p').html();      
     if('YOUR_DANGER_ALERT_CONDITION'){
           var msg = '<strong>Error!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-danger-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }else if('YOUR_WARNING_ALERT_CONDITION'){
           var msg = '<strong>Warning!</strong> There was a problem with your network connection.';
           $('#alert .alert p').html(msg);  
           $('#alert').removeClass();
           $('#alert').addClass('message-warning-display');
           $('#alert').removeAttr('style');
           e.preventDefault();
     }
});