Question

bootstrap js显示警告框

如何通过js代码控制bootstrap的警告框的显示与隐藏。
我试了$('id').show 无效
但$('id')hide()确可以

Answer 1

刚遇到这个问题，没找到好办法。不过用了笨笨的方法实现了。

默认隐藏：
<div id="alert-user" class="alert alert-danger hidden" role="alert">
<strong>错误：</strong>请输入您的用户名！
</div>

显示的时候：
$("#alert-user").attr("class","alert alert-danger");

如果需要关闭，不能用 .alert("close")。这样就再显示不出来了。再设成隐藏。

期待有更方便的办法。

Answer 2

你这样试试，这是官方文档的写法

$('#myModal').modal('show') //显示
$('#myModal').modal('hide')

//重复点击的隐藏显示有一个很更方便的写法
$('#myModal').modal('toggle')

追问

这个是模态框的

追答

是啊

追问

我问的是警告框

模态框怎么才能弹出一个半透明的图片呢？

Answer 3

http://v3.bootcss.com/javascript/#alerts

看下文档把

Answer 4

bootstarp 的警告框（alert）不像模态框（modal）那样是浮动带遮罩的效果。而且官方文档上讲的如果使用.alert('close');这个方法，将会移除整个dom元素，看清楚是移除不是隐藏哟。那么问题来了。如果我们只需要多次调用这个警告框怎么办？解决方案 楼下已经的贴出来一种，接下来我贴另外一种附带自动消失方案希望能帮到你。

我的方法是没用在原有的html 结构上经行添加，直接使用 jquery的append();这个方法进行实现。不多BB，进入正题

申明一个类，这个类的作用是，让alert 像modal 那样浮动到页面上，这里用的是绝对定位。弹框样式根据你自己的需求进行调整。这里只是做了一个定位。

CSS

.show-messages
{ 
    width: 20%; 
    height: auto; 
    position:fixed; 
    top:25%;
    right:0; 
    bottom:auto;
    left:0;
    z-index:1; 
    margin: 0 auto; 
    text-align: center; 
    font-size:18px;
}

html

<a href="javascript:showMessage();">弹出提示</a>
<a href="javascript:;" onClick="showMessage()">弹出提示</a>

javascript

function showMessage(){
var messageTitle = "系统提示 "
var messageContent = "提示信息..."
var showMsg =  '<div class="show-message alert" role="alert">'+
'<h2>'+ messageTitle +'</h2>'+ '
<p class="alert-success">'+ messageContent +'</p>’+'</div>';
$("body").append(showMsg);
setTimeOut({$(".alert").alert('close')},1500);

以上就全部代码。如果有错误，请原谅我 这编辑器不怎么会用。

这里为警告框添加了一个1.5秒的定时器，时间到了自动执行alert('close')，从而实现自动关闭的效果。

其实这个就封装提示信息的办法。好处是不用改变原有的html 结构。当然也可以在后面添加一个关闭按钮，根据你自己的需求去调整。如果需要copy 使用 请引入 Jquery，bootstarp 的JS与CSS

Answer 5

我试过show也不行 hide也不行 请问你最终是怎么解决的？