показать/скрыть alertbox с данными атрибутом в Twitter Bootstrap

Question

Я хочу, чтобы показать окно скрыть оповещения в Twitter Bootstrap с использованием атрибутов данных, это происходит потому, так что я могу использовать несколько ящиков оповещения в одной странице ...

В настоящее время у меня есть это,

<a href="#" data-box="myAlert">Hint</a> //data-box is the id of the box 

<div id="myAlert" class="alert alert-info"> 
    <a class="close" data-dismiss="alert" href="#">&times;</a> 
    <p>Alert Me !!!!</p> 
</div> 

Answer 1

Попробуйте

$(function(){ 

    $('[data-box]').click(function(){ 
    var $this = $(this); 
    $('#' + $this.data('box')).show() 
    return false; 
    }); 

    $(document).on('click', '.alert .close', function(){ 
    $(this).closest('.alert').hide() 
    }); 

}); 

Демо: Plunker

Update
Используйте вкладку якорь, чтобы показать/скрыть

<a href="#" data-box="myAlert">Hint</div> 

<div id="myAlert" class="alert alert-info hide"> 
    <p>Alert Me !!!!</p> 
</div> 

$(function(){ 

    $('[data-box]').click(function(){ 
    var $this = $(this); 
    $('#' + $this.data('box')).toggle() 
    return false; 
    }); 

}); 

Демо: Fiddle