Bootstrap Snippet Quick Right Footer Responsive Message Box using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="box-position">
<div class="container">
 
  <div class="  col-xs-12 col-md-3 col-sm-4 pull-right">
  
            <div class="panel panel-default"  >
            
                    <!-- Message box title  -->    
                        <div class="panel-heading top-bar ">
                            <div class="col-md-10 col-xs-10">
                                <p class="panel-title"><span class="glyphicon glyphicon-comment"></span>·Message</p>
                            </div>
                            <div class="col-md-2 col-xs-2" style="text-align: right;">
                                <a href="#"><span class="glyphicon glyphicon-minus icon_minim"></span></a>
                            </div>
                        </div>
                 <!-- Message body  --> 
                        <div class="panel-body msg_container_base">
                          <br />
                          <form action="#">
                            <div class="form-group">
                              <input type="text" class="form-control" id="name" placeholder="Name">
                            </div>
                            <div class="form-group">
                              <input type="text" class="form-control" id="subject" placeholder="Subject">
                            </div>
                            <div class="form-group">
                              <input type="email" class="form-control" id="email" placeholder="Email">
                            </div>
                            <div class="form-group">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.panel{
    margin-bottom: 0px;
}
.top-bar {
  background: #666;
  color: white;
  padding: 10px;
  position: relative;
  overflow: hidden;
  padding-right:5px;
}
.box-position{
    position: fixed;
    bottom: 0;
    width: 100%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).on('click', '.panel-heading span.icon_minim', function (e) {
    var $this = $(this);
    if (!$this.hasClass('panel-collapse')) {
        $this.parents('.panel').find('.panel-body').slideUp();
        $this.addClass('panel-collapse');
        $this.removeClass('glyphicon-minus').addClass('glyphicon-plus');
    } else {
        $this.parents('.panel').find('.panel-body').slideDown();
        $this.removeClass('panel-collapse');
        $this.removeClass('glyphicon-plus').addClass('glyphicon-minus');
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Quick Right Footer Responsive Message Box"
Bootstrap 3.3.0 Snippet by Goutam Bishwas

Related: See More

Questions / Comments:

"Quick Right Footer Responsive Message Box" Bootstrap 3.3.0 Snippet by Goutam Bishwas

Related: See More

Questions / Comments:

"Quick Right Footer Responsive Message Box"
Bootstrap 3.3.0 Snippet by Goutam Bishwas