I open a modal, then on click of a div within the modal I want to close that modal and open another one. But when I do this it closes the first modal and only shows the background of the second modal with the body not displayed.
My HTML is:
<div id="test-modal" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<div id="option"><p>Click here to show the next modal</p></div>
</div>
</div>
<div id="test-modal2" class="modal hide fade" data-keyboard="true">
<div class="modal-body">
<p>modal show after a hide doesn't work?</p>
</div>
</div>
and my jquery is:
$('.option').click(function() {
$('#test-modal').modal('hide');
$('#test-modal2').modal('show');
});
This can help:
Remove hide class from modals divs
You use .option in your selector, but in html you use id="option", so change them
Working version
My Stupid mistake the jquery works. I accidently didnt close off the first modal properly which is why the animation wouldnt finish and cause the second modal to not load. I simply put the secondary modal on top of the first modal to test and it worked.
Please try using this data-dismiss attribute on close button.
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Related
I want to insert an image in Modal but I need to use the value of the variable data-image as it will change according to the value of the image.
<script type="text/javascript">
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var url = "<img src='https://image.tmdb.org/t/p/w600_and_h900_bestv2/+image+'></img>"
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src',url)
modal.find('#overview').text(overview)
})
</script>
<a href="#" role="button" data-id="{{$item['id']}}" data-title="{{$item['title']}}" data-image="{{$item['imagem']}}" data-overview="{{$item['overview']}}" data-toggle="modal" data-target="#myModal">
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle"><div id="title"></div></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<p><div id="image"></div></p>
<p><div id="overview"></div></p>
</div>
</div>
</div>
I tried to use some shapes like text, val, innerhtml, but it didn't work. What is the best way to make it work what I need?
You need to use an img element as oppose to a div to set display your img and other content dynamically in your modal.
The reason its not working is DOM content is ready and you are applying styles to a div and it can not load an image asynchronously thats why you are not seeing anything.
I have added demo data and few other button to show that its all working now with different data coming from data-attributes.
Live Working Demo:
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var title = button.data('title')
var overview = button.data('overview')
var image = button.data('image')
var modal = $(this)
modal.find('#title').text(title)
modal.find('#image').attr('src', image)
modal.find('#overview').text(overview)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
Click Me
<br>
Click Me 2
<br>
Click Me 3
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
<div id="title"></div>
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p><img src="" id="image" /></p>
<p>
<div id="overview"></div>
</p>
</div>
</div>
</div>
First, understand what a modal dialog is: it is just a div (with content) that is positioned so that it sits on top of the rest of the page, usually accompanied by another div that sits directly underneath it and partially darkens the rest of the page while preventing the user from clicking on anything underneath. These two divs begin hidden, but can be displayed based on user activity, and then re-hidden.
The modal word indicates that this div structure has the focus - the user cannot interact with any other part of the page until the modal dialog is closed. This is accomplished via that second (overlay) div that is height/width 100% and is positioned (via z-index) to stack between the dialog and the rest of the page.
The important thing to note is that they are just ordinary div structures that exist on the page - or that are added to the page - at will. That means, you can change the content (text or html) inside the modal div structure as easily as you can change the content of any other div. There is nothing different about a modal div structure at all.
Bootstraps modal dialogs are exactly the same, but they include some extra sizzle that add some extra visual coolness and that make them a bit easier to work with. Other than that, they are exactly like self-made modal dialogs - which are exactly like ordinary div structures.
To demonstrate, we'll create a super-simple home-made modal dialog and use it to do what you request.
Note the following about the home-made modal dialog:
(a) We use position:fixed or position:absolute to remove the modal div structure from the usual HTML flow - allowing it to sit on top of the rest of the page.
(b) We use z-index to position the modal div structure ABOVE the rest of the page
(c) We add a second div (the "overlay") that sits on top of the page, but underneath the modal. Its purpose is to darken the page underneath the modal dialog and to prevent the user from clicking anything on the page until they finish with the dialog.
$('button').click(function(){
let img = $('#modal').data('image');
$('#modal-content').html(`<img src="${img}" />`);
$('#overlay, #modal').fadeIn();
});
$('#modal-close').click(function(){
$('#overlay, #modal').fadeOut();
});
#overlay{z-index:998;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);}
#modal{z-index:999;position:fixed;top:15vh;left:25vw;width:50vw;height:30vh;}
#modal-close{position:absolute;top:0;right:0;padding:10px;font-size:2em;border:1px solid grey;}
#modal-close:hover{color:dodgerblue; border:1px solid dodgerblue;cursor:pointer;}
#overlay, #modal{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='overlay'></div>
<div id='modal' data-image='http://placekitten.com/400/300'>
<div id='modal-close'>X</div>
<div id='modal-content'></div>
</div>
<button>Show Modal</button>
References:
Easiest way to use a div as a modal dialog with jQuery
I have some issues with Bootstrap modal. When I click to open a modal, it's seems good, but when I close modal it's all black. I noticed that when I click x (close), at the end of code I have 5 of this classes <div class="modal-backdrop fade in"></div>.
Here is the code of modal:
<div class="modal fade product-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<h3 class="modal-title product-title">
{{$prod_name}}
</h3>
</div>
<div class="modal-body">
<div class="product-description">
{{$product->description}}
</div>
</div>
</div>
</div>
</div>
It's in PHP foreach.
Full code: pastebin.com/uZHYqqBu (first modal starts from line 221 and second from line 286).
If you are using the whole modal code inside the foreach then you will have multiple instances of modal element so the functionalities in bootstrap will not work properly since these functionalities are designed for targeting single instance of element.
So, to solve this you have to keep the modal code out of the foreach block and have to populate the data in the modal dynamically on a click event.
I have'a modal ( I use twitter bootstrap 2.3.2 and I need to use it please dont say to use bootstrap3), and I want to show different content based on the clicked button. In other words, there are multiple buttons that are added dynamically into dom, and based on the clicked button, I need to show different content. Currently, it always shows the content of the first clicked button no matter where I'am pushing. Here is my code:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h3 id="myModalLabel">Query Name</h3>
</div>
<div class="modal-body">
<div id="graph" style="position:relative;overflow:hidden;cursor:default;" class="{{getViewType}}">
<center id="splash" style="padding-top:230px;">
<img src="../images/loading.gif">
</center>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
And this is my handler:
$(document).on('hidden','#myModal',function(){
console.log('it comes here'); // this is printed every time I close modal
$(this).removeData('modal');
});
Perhaps check that the id's of the dynamically added buttons are unique. Also that any function code that will run when they're clicked, is also dynamically added otherwise it won't run. It would certainly help to see the code for the buttons.
DEMO
Ok.. I prefer .shown event of modal for this case and a global variable to store the data of clicked button as below
var dataToShow=""; //global variable
//A button click event to store data
$('button').on('click',function(){
dataToShow=$(this).text();//For DEMO purpose am storing text of button clicked in dataToShow
});
$(document).on('shown','#myModal',function(){
//Will be triggered when modal is opened
alert(dataToShow);//Just for verification
$('.modal-body .datadisplay').html(dataToShow);
//assign the value in a separate div inside modal-body so that you will not replace anything else each time
});
Now since the button is dynamically created, I would suggest to use event delegation here to attach event to button
$(document).on('click','.yourbuttonClass',function(){
dataToShow=$(this).text();
});
Now if you want you can make use of
$(document).on('hidden',"#myModal",function(){
//clear the contents inside an element added i.e. .datadisplay inside modal-body
$('.modal-body .datadisplay').empty();
})
I have a simple div tag, that contains a button. When ever user clicks on this button it simply shows an alert.
<div id="myDiv">
<input type="button" id="btn" value="Click Me" />
</div>
and I also have a empty twitter bootstrap modal.
<div class="modal hide" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body"></div>
</div>
I have a second button, when ever the user clicks on it, it opens the bootstrap modal. I want to show "myDiv" in bootstrap modal when ever the user clicks on the second button. I want "myDiv" to be present in when ever modal opens and also I want to be present in my HTML document. So that I can always access it with out creating second button in modal.
Any idea how can I do that ?
I think this is what you were going for so basically on the modal show we append that button to the modal body.
$("#myDiv") .appendTo(".modal-body");
but we aren't done because after modal close we need to get it back in the body so we do:
$('#myModal').on('hide.bs.modal', function (e) {
$("#myDiv") .prependTo("body");
})
Here is a working fiddle:
http://jsfiddle.net/zcb3h/2/
I hope this is what you were looking for.
I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.
But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.
I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:
<script>
jQuery(document).ready(function() {
jQuery('#subscribe').modal('hide')
});
</script>
So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.
Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:
http://jackalopemedia.com/jasontreu
Appreciate any help!
Ok I found the solution
You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.
So your line should be
<div id="subscribe" class="modal hide fade" role="dialog">
For more details visit bootstrap
Compare Your Modal With This, If Your Code Match With This, It Should Be Working.
<div class="modal fade hide" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h2>Title</h2>
</div>
<div class="modal-body">
<span>body</span>
</div>
<div class="modal-footer">
<span id="spanbtnclode" > <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></span>
</div>
</div>
</div>
</div>