I am new to Bootstrap and Html. I am currently trying to separate my Add Person button away from the panel body but I do not know how to achieve that. Below is the screenshot of my problem and my current codes:
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use clearfix div as sugggested below. And add margin-top: 10px; on the panel-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="panel panel-primary">
<div class="panel-heading ">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right" style="float: right;">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="clearfix"></div>
<div class="panel-body" style="margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
you can use margin-bottom.
This would be my way to fix this:
Give your button an id and add bottom margin within your css:
#yourButtonId{ margin-bottom: 10px; }
OR
Put your Button in a new bootstrap row: <div class="row"> ---Your button code--- </div>
Related
I have a table inside a div that shows some important information about the elements inside the div and I want this table to follow the scroll as long as the div.
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12 col-lg-19 ">
<div class="table-responsive">
<table>
<tr style="white-space:nowrap;">
<th class="fill"><h2>Meritos</h2></th>
<th scope="row" style="white-space:nowrap;">
<h2>Auto Puntuación</h2>
<input type="text" value="<?= $solicitude->autoPuntuacion ?>" size="2" disabled>
</th>
<th></th>
<th scope="row" style="white-space:nowrap;">
<h2>Puntuación Evaluación</h2>
<input type="text" id="puntuacion" value="<?= $solicitude->puntuacionEvaluacion ?>" size="2" disabled>
</th>
</tr>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
{code .....}
</div>
</div>
</div>
</div>
I have tried everything that I found about making an element follow the scroll with Javascript/jQuery with no result.
I´m working with Bootstrap v3.3 and Cakephp v3.5.
Thanks a lot in advance.
Use position: fixed;
See code below:
.panel-body{
height: 150px;
overflow-y: scroll;
padding:0!important;
}
.table-responsive{
position: fixed;
width:90%!important;
}
.list-group{
height: 300px;
}
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="DivMeritos" class="panel">
<div class="panel-body">
<div class=" col-md-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="list-group"> <!-- <a class="list-group-item active"> -->
</div>
</div>
</div>
</div>
I have an issue with the behavior of toggle on click when I include pagination management in List.js. The effect works properly first, but when I navigate to page 2 then back to page one, toggle effect is not responding. I have to click 2 times on the pagination link to restore the effect.
How can I correct this behavior? And more generally, what is the right strategy to debug this kind on problem?
Here is a codepen with the example, and bellow the js and html codes.
Thank you for your help!
var options = {
valueNames: [
'date',
'conversions',
'revenue',
'cr'
],
page: 3,
pagination: true
};
var userList = new List('users', options);
function hide_and_toggle(userList){
$('.row-toggle').hide();
$(".list li").on('click', function(row){
$(this).find('.row-toggle').toggle();
});
}
$(function(){
hide_and_toggle(userList);
userList.on('updated', function(userList){
hide_and_toggle(userList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">
<input class="search" placeholder="Search" />
<div class="row">
<button class="sort col" data-sort="date">
Sort by Date
</button>
<button class="sort col" data-sort="conversions">
Sort by Conversion Count
</button>
<button class="sort col" data-sort="revenue">
Sort by Revenues
</button>
<button class="sort col" data-sort="cr">
Sort by CR
</button>
</div>
<ul class="list">
<li data-id="1">
<div class="row">
<div class="col text-center date">1</div>
<div class="col text-center conversions">10</div>
<div class="col text-center revenue">100</div>
<div class="col text-center cr">1000</div>
</div>
<div class="row row-toggle">
<div class="col">
<span> Goals</span>
<table class="table-sm">
<tr>
<td>Install</td>
<td>20</td>
</tr>
<tr>
<td>First listen</td>
<td>3</td>
</tr>
<tr>
<td>Purchase</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col">
<span>Scrubed & Overdelivery</span>
<table class="table-sm">
<tr>
<td>Scrubed</td>
<td>30</td>
<td>200</td>
</tr>
<tr>
<td>Over Delivery</td>
<td>40</td>
<td>400</td>
</tr>
</table>
</div>
</div>
</li>
<li data-id="2">
<div class="row">
<div class="col text-center date">2</div>
<div class="col text-center conversions">20</div>
<div class="col text-center revenue">200</div>
<div class="col text-center cr">2000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 2
</div>
</div>
</li>
<li data-id="3">
<div class="row">
<div class="col text-center date">3</div>
<div class="col text-center conversions">30</div>
<div class="col text-center revenue">300</div>
<div class="col text-center cr">3000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 3
</div>
</div>
</li>
<li data-id="10">
<div class="row">
<div class="col text-center date">10</div>
<div class="col text-center conversions">100</div>
<div class="col text-center revenue">1000</div>
<div class="col text-center cr">10000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 10
</div>
</div>
</li>
</ul>
<ul class="pagination"></ul>
</div>
The root cause:
If userList.on('updated', function(userList){} is triggered, it will bind the $(".list li").on('click', function(row){} again and again.
You can try to double click page 1, then you will find the toggle is not working (actually it is toggled twice, so it seems no toggle).
When you click again, you will find the toggle is working again. (actually it is toggled three times).
The solution is very easy, just unbind before bind $(".list li").on('click').
var options = {
valueNames: [
'date',
'conversions',
'revenue',
'cr'
],
page: 3,
pagination: true
};
var userList = new List('users', options);
function hide_and_toggle(userList){
$('.row-toggle').hide();
$( ".list li").unbind( "click" ); //clear up event binding.
$(".list li").on('click', function(row){
$(this).find('.row-toggle').toggle();
});
}
$(function(){
hide_and_toggle(userList);
userList.on('updated', function(userList){
hide_and_toggle(userList);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="users">
<input class="search" placeholder="Search" />
<div class="row">
<button class="sort col" data-sort="date">
Sort by Date
</button>
<button class="sort col" data-sort="conversions">
Sort by Conversion Count
</button>
<button class="sort col" data-sort="revenue">
Sort by Revenues
</button>
<button class="sort col" data-sort="cr">
Sort by CR
</button>
</div>
<ul class="list">
<li data-id="1">
<div class="row">
<div class="col text-center date">1</div>
<div class="col text-center conversions">10</div>
<div class="col text-center revenue">100</div>
<div class="col text-center cr">1000</div>
</div>
<div class="row row-toggle">
<div class="col">
<span> Goals</span>
<table class="table-sm">
<tr>
<td>Install</td>
<td>20</td>
</tr>
<tr>
<td>First listen</td>
<td>3</td>
</tr>
<tr>
<td>Purchase</td>
<td>4</td>
</tr>
</table>
</div>
<div class="col">
<span>Scrubed & Overdelivery</span>
<table class="table-sm">
<tr>
<td>Scrubed</td>
<td>30</td>
<td>200</td>
</tr>
<tr>
<td>Over Delivery</td>
<td>40</td>
<td>400</td>
</tr>
</table>
</div>
</div>
</li>
<li data-id="2">
<div class="row">
<div class="col text-center date">2</div>
<div class="col text-center conversions">20</div>
<div class="col text-center revenue">200</div>
<div class="col text-center cr">2000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 2
</div>
</div>
</li>
<li data-id="3">
<div class="row">
<div class="col text-center date">3</div>
<div class="col text-center conversions">30</div>
<div class="col text-center revenue">300</div>
<div class="col text-center cr">3000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 3
</div>
</div>
</li>
<li data-id="10">
<div class="row">
<div class="col text-center date">10</div>
<div class="col text-center conversions">100</div>
<div class="col text-center revenue">1000</div>
<div class="col text-center cr">10000</div>
</div>
<div class="row row-toggle">
<div class="col">
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
</div>
<div class="col">
Content On the side 10
</div>
</div>
</li>
</ul>
<ul class="pagination"></ul>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
My table header is looking like this:-
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading"> <h3 class="panel-title">Info</h3> </div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
I want to full hide this entire ID column with the id="hidethis".
What I tried :
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th.
$('hidethis').hide();
No impact with that jquery also.
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there.
I will also put a picture:
I want to full hide all of the marked with red.
I've tried to make my code as easy as possible and also included some comments.
I would consider using a class instead of an id though. :)
// Save index (position) of th
const cellIndex = $('#hidethis').index();
// Hide th first
$('#hidethis').hide();
// Iterate over each table row
$('#scale_missed_entries tbody tr').each(function () {
// Select the cell with same index (position) as the table header
const cell = $(this).children('td').get(cellIndex);
// Hide 'em
$(cell).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Simply using CSS
[data-field="product_id"] {
display: none;
}
tr td:nth-of-type(1) {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td>1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th class="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidethis" data-field="product_id">112</td>
<td data-field="product_weight">51</td>
<td data-field="product_added_date">2017-10-11</td>
<td data-field="button">hi1</td>
</tr>
<tr>
<td class="hidethis" data-field="product_id">111</td>
<td data-field="product_weight">50</td>
<td data-field="product_added_date">2017-10-10</td>
<td data-field="button">hi</td>
</tr>
</tbody>
</table>
</div>
</div>
Note:- without jquery also you can now hide then through css:-
.hidethis{
display:none; // or visibility:hidden;
}
Add:
#hidethis { display: none; }
to your css:
#hidethis {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
Hope it helps.
Just use this
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment
To hide entire column use this--
#hidethis{
display:none;
}
#myTable th:nth-child(1) {
display: none;
}
#hidethis{
display:none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td id="hidethis">1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
I am using bootstrap modal.
In view,
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices.</p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>
Script for showing modal,
$('#notificationform').ajaxForm({
beforeSubmit: validate,
beforeSend: function () {
$('#spinner1').html('Initializing');
$('.modal-header').html('Initializing');
$('.top,.left').hide();
$('#basic').popup('show');
showLoader();
},
complete: function (xhr) {
var response = xhr.responseText;
var status = xhr.status;
if (status == '200') {
var res = response.split("<!DOCTYPE html>");
var obj = $.parseJSON(res[0]);
Out side this ajaxform function the modal is showing, But i want to show modal in beforesend function.
But this code is not working.I want to show pop up, but it is not displaying anything. Please help me. How to solve this.
Use Proper Library and latest library for modal...
See the snippest..
$("#myBtn").click(function(){
$("#basic").modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<div id="basic" class="well modal fade" style="max-width:44em;">
<div class="model-header">Send Push</div>
<div class="model-body">
<div class="top">
<p>You are sending text push notifications to all devices. </p>
</div>
<div class="left" style="width: 100%;height: 100px;float: left;">
<table style="margin-top: 10px;width: 100%">
<tr>
<th>Device Type</th>
<th>Device Count</th>
<th>Remaining</th>
</tr>
<tr id="row1">
<td>IOS</td>
<td></td>
<td>0</td>
</tr>
<tr id="row2">
<td>Android</td>
<td></td>
<td>0</td>
</tr>
</table>
</div>
<div class="right" style="width: 100%;height: 250px;float: left;">
<div style="width: 100%;height: 55px;margin-top: 25%" id="spinner">
</div>
<div id="spinner1" style="width: 100%;text-align: center">Please be patient.This may take awhile</div>
</div>
</div>
</div>