In this code snippets post I provided reusable
Bootstrap Modal Dialog with code example.
Bootstrap
JavaScript modal
Bootstrap JavaScript modal plugin you
can use to add confirm dialogs, user notifications, or completely custom popup
content.
Reusable bootstrap
confirm box
Add following html code in your shared
layout view
<!-- Modal -->
<div class="modal fade" id="bsModal" tabindex="-1" role="dialog" aria-labelledby="bsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm message</h5>
<button type="button" id="btnClose" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="confirmMsg" class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="btnCancel" class="btn
btn-warning" data dismiss="modal">Cancel</button>
<button type="button" id="btnOk" class="btn btn-success">Ok</button>
</div>
</div>
</div>
</div>
jQuery reusable model confirms box code
to perform actions like delete, update, reject etc
Button Delete, Update,
Reject events
//Perform delete
$("#btnDelete").click(function (e)
{
//Delete product on confrim ok click
BsConfirmModel("Are you sure you wish to delete?", "Delete", e);
});
//Perform update
$("#btnUpdate").click(function (e) {
//Update order on confrim ok click
BsConfirmModel("Are you sure you wish to update?", "Update", e);
});
//Perform Reject order
$("#btnReject").click(function (e) {
//Reject order on confrim ok click
BsConfirmModel("Are you sure you wish to reject?", "Reject", e);
});
Reusable bootstrap
confirm function
function BsConfirmModel(msg, actionType,event) {
event.preventDefault();
$("#confirmMsg").text(msg);
$('#bsModel').modal({
backdrop: 'static',
keyboard: false
});
$("#bsModel").off('click').on('click', '#btnOk', function (e) {
e.preventDefault();
switch (actionType) {
case 'Delete':
//code block
// Ajax call to delete
break;
case 'Update':
//code block
// Ajax call to update
break;
case 'Approve':
//code block
// Ajax call to approve order
break;
case 'Reject':
//code block
// Ajax call to reject order
break;
default:
//code block
//default ajax call
break;
}
$('#bsModel').modal('hide');
$('#bsModel').data('modal', null);
});
$("#btnCancel").off("click").on('click', function (e) {
e.preventDefault();
$('#bsModel').modal('hide');
$('#bsModel').data("modal", null);
});
$("#btnClose").off("click").on("click", function (e) {
e.preventDefault();
$("#bsModel").modal("hide");
$('#bsModel').data("modal", null);
});
}
I want to perform search for my products
if someone entered some search value in
Input search text box and hit keyboard
enter button.
The .nav-tabs class is used to
generate a tabbed interface with nav-tabs as tabs in bootstrap.
Tab Nav
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#userList">User list </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#details">Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rewards">Rewards</a>
</li>
</ul>
Tab content (Tab pane)
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show
active" id="userList" role="tabpanel" aria-labelledby="user-tab">some actual
list data here..</div>
<div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">some
actual details data here…</div>
<div class="tab-pane fade" id="rewards" role="tabpanel" aria-labelledby="rewards-tab">Rewards data here...</div>
</div>
jQuery Code to show specific
tab
Show first tab
$(".nav-tabs a:first-child").tab("show");
Show 2nd tab
$(".nav-tabs a:nth-child(2)").tab("show");
Show last tab
$(".nav-tabs a:last").tab("show");
To hide tab simply remove
active class from nav-item
$(".nav-tabs a.active").removeClass("active");