javascript - Bootstrap close div box - Stack Overflow

admin管理员组

文章数量:1345179

Hello everyone i started learning bootstrap for a while,

And i want to make close button for div boxes i have this code but the X button doesn't work:

<div class="panel panel-default">
    <table class="table table-hover">
        <thead>
            <tr style="background-color: lavender;">
                <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
                <th><a href="#" class="close" data-dismiss="panel" aria-label="close" id="hide">&times;</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester</td>
                <td>T1 2+p.p</td>
            </tr>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr style="background-color: lightgreen;">
                <th>Bet: 2100</th>
                <th>Win: 55864</th>
            </tr>
        </tbody>
    </table>
</div>

and here is the JavaScript:

$(document).ready(function() {
    $("#hide").click(function(){
        $("panel").hide();
    });
});

Hello everyone i started learning bootstrap for a while,

And i want to make close button for div boxes i have this code but the X button doesn't work:

<div class="panel panel-default">
    <table class="table table-hover">
        <thead>
            <tr style="background-color: lavender;">
                <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
                <th><a href="#" class="close" data-dismiss="panel" aria-label="close" id="hide">&times;</a></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester</td>
                <td>T1 2+p.p</td>
            </tr>
            <tr>
                <td>Manchester United - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr>
                <td>FC Barcelona - Manchester United</td>
                <td>2 - 1</td>
            </tr>
            <tr style="background-color: lightgreen;">
                <th>Bet: 2100</th>
                <th>Win: 55864</th>
            </tr>
        </tbody>
    </table>
</div>

and here is the JavaScript:

$(document).ready(function() {
    $("#hide").click(function(){
        $("panel").hide();
    });
});

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Aug 7, 2015 at 13:33 Siguza 24k66 gold badges5555 silver badges9898 bronze badges asked Jul 25, 2015 at 9:29 Jad ChahineJad Chahine 7,18999 gold badges4040 silver badges6464 bronze badges 1

• 1 $(".panel") instead – Khanh TO Commented Jul 25, 2015 at 9:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You have to set an Id to the div class="panel" and set this id in a href=#id. THen change data-dismiss="modal" to data-dismiss="panel" and you can remove the javascript code.

You can check it here https://jsfiddle/foyckLaf/

<div class="panel panel-default" id="current-pane">
<table class="table table-hover">
    <thead>
        <tr style="background-color: lavender;">
            <th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
            <th><a href="#current-pane" class="close" data-dismiss="alert" aria-label="close" id="hide">&times;</a></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manchester United - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr>
            <td>FC Barcelona - Manchester</td>
            <td>T1 2+p.p</td>
        </tr>
        <tr>
            <td>Manchester United - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr>
            <td>FC Barcelona - Manchester United</td>
            <td>2 - 1</td>
        </tr>
        <tr style="background-color: lightgreen;">
            <th>Bet: 2100</th>
            <th>Win: 55864</th>
        </tr>
    </tbody>
</table>
</div>

Related: How can I dismiss a bootstrap panel using data-dismiss?

There is no panel element, you need .panel:

$(".panel").hide();

panel corresponds to <panel></panel> element, clearly you don't have in in your code.

本文标签： javascriptBootstrap close div boxStack Overflow