发表新帖
发表新帖

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

后端 未结
关注
4 1692
遥遥无期
遥遥无期 2021-01-01 23:23

I have a button which opens a panel and I want to be able to close it like I would with an alert.

The Default panel example from bootstrap docs
相关标签:
4条回答
  • 走了就别回头了
    2021-01-01 23:35

    Ok, some time passed since this question was raised... and in the meantime the BS3 panels have been replaced in BS4 by the so called cards. A nice way to realize a dismissible card without any custom JavaScript and only with Bootstrap CSS classes is the following: the combination of card-header, the Bootstrap 4 Close Icon and negative margins (here .mt-n5) on the card-body. The close icon gets nicely positioned within the card-header and the negative margins pull the card content closer into the header area.

    <div class="container">
  <div id="closeablecard" class="card card-hover-shadow mt-4">
    <div class="card-header bg-transparent border-bottom-0">
      <button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="card-body mt-n5">
      <h5 class="card-title">Your Title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab.
      </p>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

    To actually close the card we can make use of the BS4 Data-API and put the the following data attributes in the button tag: data-dismiss="alert" data-target="#closeablecard". data-target is the ID of our card and data-dismiss=alert triggers the actual close event in Bootstrap.

    See a Demo on JSFiddle...

    HTH,
    hennson

    0 讨论(0)
  • 天涯浪人
    2021-01-01 23:43

    You can do this by using an undocument feature to set the target of the dismiss action...

    <button type="button" class="close" 
data-target="#id_of_panel" 
data-dismiss="alert">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>

    This will make the close button close the panel as opposed to its parent element.

    0 讨论(0)
  • 不知归路
    2021-01-01 23:43

    I used Bootstrap version 3 and fontAwesome.

        <div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" href="#id_panel" aria-expanded="true">
        <div class="panel-title">     
            <i class="fa fa-th-list" aria-hidden="true"></i>  Formulario 
            <i class="fa fa-minus-square pull-right" aria-hidden="true"></i>
            <i class="fa fa-plus-square pull-right" aria-hidden="true"></i>
        </div>
    </a></div></div>

    And your content div.

    <div class="panel-collapse collapse in" id="id_panel" aria-expanded="true">
...content
</div>
    0 讨论(0)
  • 花落未央
    2021-01-01 23:51

    Those who wants to place a "close" button inside the collapsible panel to collapse panel back, you can use following snippet:

    <!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Collapsible Panel</h2>
    <p>Click on the collapsible panel to open and close it.</p>
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>

          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">
            <button type="button" data-target="#collapse1" data-toggle="collapse">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

    0 讨论(0)
 看不清?
提交回复
热议问题