How to have data-slide effects inside Bootstrap modal? - javascript

Is it possible to have data-slide effect inside bootstrap modal without using carousel
When i click a next button within the modal it need to slide to next div,and when back button clicked it need to data-slide previous page
is that possible??
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is Content 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Move Next</button>
</div>
<div class="modal-body">
This is Content 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" style="float:left;">Move Back</button>
<button type="button" class="btn btn-primary">Move Next</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Bo
Example

You don't specify why you don't want to use carrousel. What i would do is thinking modals as simple slider. I would use a modal container larger than the window and push the modals dialogs to the left.
You can watch here the live example:
https://jsfiddle.net/juanmamig/cfmepxpd/1/
$(".btn-next").click(function() {
$('#modal-container').animate({
'margin-left': '-=100%'
}, 500);
});
$(".btn-back").click(function() {
$('#modal-container').animate({
'margin-left': '+=100%'
}, 500);
});
#modal-container {
width: 200%;
/* One Modal --> 100%, Two modals --> 200%*/
overflow: hidden
}
.modal-dialog {
float: left;
width: 50%;
margin: 10px auto;
}
.modal-content {
width: 600px;
margin: 0 auto;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modal-container">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is Content 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="next" class="btn btn-primary btn-next">Move Next</button>
</div>
</div>
</div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
</div>
<div class="modal-body">
This is Content 2
</div>
<div class="modal-footer">
<button type="back" class="btn btn-primary btn-back">Move Back</button>
<button type="next" class="btn btn-primary btn-next">Move Next</button>
</div>
</div>
</div>
</div>
</div>

Related

Bootstrap 4 modal over modal focus trap lost

Bootstrap 4: by open the first modal, the focus is a trap inside it (you can move the focus with tab key and you will never focus element outside the modal). When you open the second modal the focus is a trap inside it and again you can't focus outside element (this is right).
When you close the second modal the focus will back to the first modal (this is right) but the problem is that if you move the focus with tab key then the focus will go out (after the last focusable modal1 element) from the first modal so it is not trapped anymore in the first modal. Is there is any solution to solve the problem with bootstrap 4?
you can test it in jsfiddle (firefox browser):
https://jsfiddle.net/4cnmvf13/1/
html5:
<!-- Modal2 -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
1
<!-- Button trigger modal2 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal1 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
css:
#exampleModal2 {
z-index: 200000;
}
Bootstrap does not handle these kinds of scenario it seems, you can handle the event as it is below to get the required tab-index with in the model
$('#exampleModal2').on('show.bs.modal', function () {
$('#exampleModal').modal("hide");
})
$('#exampleModal2').on('hide.bs.modal', function () {
$('#exampleModal').modal("show");
})
#exampleModal2 {
z-index: 1600;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
1
<!-- Button trigger modal2 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal1 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

How to change data-target of a button within a modal using Javascript?

I have a button within a modal. When I press the button, I want that modal to close, and another modal to open. However, the modal that opens isn't the same each time, so the data-target on the button needs to change each time it is pressed.
In order to close the modal, I have data-dismiss="modal" in the attributes of the button.
I have three modals with ID's 1,2,3. I want to use the random Javascript function to choose which one opens
var randomnumber = num.toString(Math.floor(Math.random() * (3 - 1 + 1)) + 1);
I tried doing this, but it didn't work:
$('#button').click(function() {
$(randomnumber).modal('show');
Update : this code ,each time will open a random modal and close other one.
$('.fade').hide();
$('.btn-info').click(function()
{
var randomnumber =Math.floor(Math.random() * 3) + 1;
$('.fade').hide();
$('#m'+randomnumber).show(10);
alert("modal" + randomnumber)
});
$('#btn3').click(function()
{
$('.fade').hide();
$('#myModal').show();
});
$('.close').click(function()
{
$('.fade').hide();
});
.fade
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info2 btn-lg" id="btn3" data-toggle="modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" id = "random" >Random Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="m1" role="dialog" data-dismiss="modal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" id = "random">Random Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="m2" role="dialog" data-dismiss="modal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" id = "random">Random Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="m3" role="dialog" data-dismiss="modal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" id = "random">Random Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal within modal when opened, close first only - Bootstrap

I have created bootstrap modal within modal and first open the main modal and then opening the child modal within the modal, but when I close it should first close the child modal and then parent modal separately, Currently its closing all together.
Also, I am trying to close it in dynamic way, as the parent/child modal ID may get changed.
<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 trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Main Modal - Parent
<!-- Button trigger modal -->
<button type="button" id="mymodal-inner" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-inner">
Launch demo modal
</button>
<!-- Modal Inner -->
<div class="modal fade" id="myModal-inner" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Inner Modal - Child
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You have to place the #myModal-inner div outside the #mymodal div. Check the snippet below.
<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 trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Main Modal - Parent
<!-- Button trigger modal -->
<button type="button" id="mymodal-inner" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-inner">
Launch demo modal
</button>
<!-- Modal Inner -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-inner" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Inner Modal - Child
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have updated the code that you have given, Only i have triggered the Child Modal Close via jQuery. Please check
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Main Modal - Parent
<!-- Button trigger modal -->
<button type="button" id="mymodal-inner" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-inner">
Launch demo modal
</button>
<!-- Modal Inner -->
<div class="modal fade childModel" id="myModal-inner" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close closeChild" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Inner Modal - Child
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default closeChild">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="parentid" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
jQuery(document).on("click", "button.closeChild", function (e) {
jQuery('.childModel').modal('hide');
});
</script>

add button to bootstrap modal footer dynamically by jquery

I'm trying to add a button dynamically to the footer of a bootstrap modal.
Is that possible? Can't find it.
<div class="modal fade" id="myModalRead" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body"><p id="myModalBody"></p>
</div>
<div class="modal-footer" id="myModalFooter" >
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
for example this button:
> <button type="button" class="btn btn-default btn-ok"
> data-dismiss="modal">Delete or whatever</button>
jquery:
jQuery(function($) {
$("#myModalBody").html(text);
$("#myModalRead").modal('show');
});
kind of
$("#myModalFooter").addabutton();

bootstrap modal is not displaying as per my requirement

my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:
Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.
Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
DEMO

Categories