add button to bootstrap modal footer dynamically by jquery - javascript

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();

Related

how can i call selected item into model when i click on button in react?

how can i call selected item into model when i click on button in react? I tried this code but it gave me same output for every buttons...
More Details
<div class="modal fade" tabIndex="-1" id="exampleModal" 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">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" onClick={this.update}>
<h4>{this.state.data.name}</h4>
<h5>Region :- {this.props.item.region}</h5>
<h6>Capital :-{this.props.item.capital}</h6>
</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>

handleItem(capital){
console.log(capital)
}
render(){
return(
<div class="modal fade" tabIndex="-1" id="exampleModal" 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">Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" onClick={this.update}>
<h4>{this.state.data.name}</h4>
<h5>Region :- {this.props.item.region}</h5>
<h6>Capital :-{this.props.item.capital}</h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
onClick={this.handleItem.bind(this,this.props.item?.capital)} >Close</button>
{/* <button type="button" class="btn btn-primary">Save changes</button> */}
</div>
</div>
</div>
</div>
)
}
i think you are missing onclick event where you can get the value

Multiple Different Types of Modals in one page

In our page we are trying to have 3 different types of modals depending on the data-target attribute of buttons. We can only display the first modal and can get data to be displayed there the second and the third models won't show up.
Here is the code for all of the modals:
<div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
                  <div class="modal-body" id="normalBody">
                   <p id="normalText"></p>
                   <div class="modal-footer">
<div id="success-text"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>
<button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>
                   </div>
</div>
</div>
</div>
<div class="modal fade" id="yourShift" tabindex="-1" role="dialog" aria-labelledby="yourShiftLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
                  <div class="modal-body" id="yourShiftBody">
                   <p id="yourShiftText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>
                   </div>
</div>
</div>
</div>
<div class="modal fade" id="needsSub" tabindex="-1" role="dialog" aria-labelledby="needsSubLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="needsSubLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
                  <div class="modal-body" id="needsSubBody">
                   <p id="needsSubText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>
                   </div>
</div>
</div>
</div>
Here is an example code for the buttons that trigger the modal:
<td id="monDinner" day ="0">
<div class="list-group">
<a id="monDinnerManager" taskid = 1 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target=“#yourShift”>Manager</a>
<a id="monFirstDinner" taskid = 2 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">First Dinner</a>
<a id="monSecondDinner" taskid = 3 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">Second Dinner</a>
</div>
</td>
And here is the javascript code that should populate the bodies:
if (modalId == '#staticBackdrop') {
           console.log("here");
           $('#normalText').load(dataURL,function() {
$('#staticBackdrop').modal('show');
});
           }
           else if (modalId == '#yourShift') {
           console.log(modalId);
           $('#yourShiftText').load(dataURL,function() {
           $('#staticBackdrop').modal({show:false});
           $('#needsSub').modal({show:false});
$('#yourShift').modal({show:true});
});
           }
           else {
           $('#needsSubText').load(dataURL,function() {
$('#modal-body').modal({show:true});
});
           }
Thank you very much in advance!

You forgot add some close </div> in your code (i've marked it with comment "there"):
<div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="normalBody">
<p id="normalText"></p>
</div> <!-- there -->
<div class="modal-footer">
<div id="success-text"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>
<button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="yourShift" tabindex="-1" role="dialog" aria-labelledby="yourShiftLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="yourShiftBody">
<p id="yourShiftText"></p>
</div> <!-- there -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="needsSub" tabindex="-1" role="dialog" aria-labelledby="needsSubLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="needsSubLabel">Shift Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="needsSubBody">
<p id="needsSubText"></p>
</div> <!-- and there -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>
</div>
</div>
</div>
</div>

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>

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>

How do I implement navigation from one modal to another one with Bootstrap?

I have several elements on a page.
When you click one of them, a modal should appears.
I wish it could be possible to navigate from one bootstrap modal to another.
How do I implement this behavior using Bootstrap?

This will be useful for you:
HTML Code
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-next">
Next
</button>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-back">
Back
</button>
<div class="modal fade" id="modal-next" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Page1</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="next-trigger">Next</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-back" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Page2</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="back-trigger">Back</button>
</div>
</div>
</div>
</div>
JS Code
$("#next-trigger").click(function(){
$('#modal-next').modal('hide');
$('#modal-back').modal('show');
});
$("#back-trigger").click(function(){
$('#modal-back').modal('hide');
$('#modal-next').modal('show');
})
Check it out.

Categories