Modal fade dialog does not open - javascript

I'm trying to open a popup by using the modal Bootstrap. Here is the modal code:
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<%--<a class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</a>--%>
<button class="btn btn-info pull-right" data-toggle="modal" data-target="#myModal">Requirements</button>
Now when I try to trigger modal by button it doesn't work but it works when i use anchor tag <a>.
How can I make it work with button?


I have created a JSFIDDLE, please refer it. Here is the sample code for opening the modal on button click:
HTML:
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
I am a link
<button data-toggle="modal" data-target="#myModal" id="my_button">I am a button</button>
</div>
<!-- Modal -->
<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">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</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>
JS:
$('#my_button').click(function(){
$('#myModal1').modal('show');
});

Related

How to link JS function to a Bootstrap Text Input Modal?

I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.

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>

I would like to know how to create a custom dialog box that rises when button gets clicked n that

I would like to know how to create a custom dialog box that rises when button gets clicked n that box should be beside the the button...please help me out brothers

You can use Bootstrap model
http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button type="button" 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" aria-hidden="true">
<div class="modal-dialog">
<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">
...
</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>

Categories