How to open multiple pics on single button - javascript

I made four buttons with single bootstrap modal & a button in bootstrap modal to open pic according to click on four buttons.
Now single bootstrap modal is open on each button click & one button inside modal ("Open Document") I want to work on that like...
If anyone open modal through Open Modal2 then on click "open document" should be open pic as per modal 2
I'm unable to do this anyone can do it?
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda3</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda4</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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 class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
enter image description here


Here is your Solution mate :
$(".modelButton").click(function(){
$(".modelDocButton").attr("href",$(this).data("href"));
});
.buttons{ margin:20px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<div class="buttons">
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.stack.imgur.com/SdR1m.jpg">Open Modal</button>
<button type="button" class="btn btn-info btn-lg modelButton" data-toggle="modal" data-target="#myModal" data-href="https://i.imgur.com/3TWgv.jpg">Open Moda2</button>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" 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 1</h4>
</div>
<div class="modal-body">
<a class="btn btn-success modelDocButton" href="#">Open Document</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal fade" 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 2</h4>
</div>
<div class="modal-body">
<button class="btn btn-success" onClick="window.open('https://i.stack.imgur.com/SdR1m.jpg','_self')">Open Document</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end snippet -->

Related

How to get event.relatedTarget closest class text

I am working on the below code. Why am I unable to get closest paragraph .para text of each of buttons using $(event.relatedTarget)?
As you can see I am getting dummy index number for each event related buttons as well:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;
console.log(button.index());
console.log(button.parent().closest('.para').text());
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<div class="container"><p class="para">Winter</p></div>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
First Launcegr
</button>
<div class="container"><p class="para">Summer</p></div>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
Second Launcegr
</button>
<div class="container"><p class="para">Fall</p></div>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#myModal">
Third Launcegr
</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">
...
</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>

It's traversing the wrong part of the DOM. Try this:
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button.prev().find('.para').text());
});

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>

Bootstrap Modal not showing the dialog

I've been trying to implement a Bootstrap Modal for quite some time now. I've followed the instructions in the bootstrap documentation but I still can't get it right. Why doesn't this work jsfiddle
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

To run bootstrap you need to use jquery. Updated on below code and
jsfiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

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>

Modal fade dialog does not open

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');
});

Categories