I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!
Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.
Here is my function:
$(function () {
$('.team').on('click', function () {
var target = $(this).data('target');
$('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
if (status === "success") {
$(target).modal({ show: true });
}
});
});
});
Here is the html anchor and example modal:
<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>
Data held in external file team-players.html:
<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<p>Player 1: Ronaldo</p>
</div>
</div>
</div>
$(function(){
var url = "url of the modal window content";
$('.my-modal-cont').load(url,function(result){
$('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Window Container -->
<div class="my-modal-base">
<div class="my-modal-cont"></div>
</div>
<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Instead of $($this).modal({ show: true }); try $(this).modal('show');
To hide the modal, you can use $(this).modal('hide');
You can do $(this).modal("toggle") if it open it will close and vice versa.
jQuery .load() bootstrap modal and show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');
Related
HTML :
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
and
<input type="button" class="btn btn-success" id="submit2" value="Finish Recording">
What I am aiming to do is when the button is clicked, it redirects to another page, and when the redirected page is loaded, the modal should appear in the new page.
I know I can do all of this easily with multiple buttons but that's not what I'm looking for, I have even tried a sleep function which didn't work.
JS :
$('#submit2').on('click', function (e) {
location.href = "bot.net";
$('#myModal2').modal('show');
});
Any idea how to do this?
Make the modal on the page you want to display
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
From the first page where the form submission is happening
JS :
$('#myForm').on('click', function (e) {
location.href = "bot.net?showModel=1";
});
On the bot.net page on document ready check for the GET element and store it in another variable
$(document).ready(function(){
if(showModel == 1){
$('#myModal2').modal('show');
}
})
I'm trying to show a bootstrap modal when the page loads (only 1 time) and set a cookie for 7 days. But something prevents the modal to show up. If I don't use the jquery-cookie the modal turns up. What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
test
</div>
</div>
</div>
Adding alert($.cookie('pop')); doesn't do anything different. Still no popup or other message.
The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u
I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (i.e. when clicked on the Open Modal button)
Any help is appreciated.
You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here
Below is an example of using vanilla JS with Bootstrap 5:
JS:
var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
var iframe = modal.querySelector('iframe');
iframe.src = iframe.getAttribute('data-src');
})
HTML:
<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Heading
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have here the sample project that will get the value of the id of an attribute using ajax and then should show the modal using ajax.
The program that I've got is functioning well in terms of getting the id but my problem is the modal is not showing.
What I tested to know the problem is that I deleted the class="modal hide" in the modal and so the modal appeared below of the table and not in front of the whole page.
It just looked like another division under the table.
So now my problem is that the modal doesn't pop up. When the is clicked nothing happens if there is an attribute class="modal hide" of the modal, but if there is no attribute like that it is working there is a modal but it is not a pop up.
It is like another division under the table.
What's wrong with my code?
<a type="button" data-toggle="modal" id="11" class="push">Read more</a>
<script>
$(document).ready(function () {
$('.push').click(function () {
var res_id = $(this).attr('id');
$.ajax({
type: 'POST',
url: '../php-files/resolve.php', // in here you should put your query
data: 'post_id=' + res_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function (r) {
// now you can show output in your modal
$('#mymodal').modal('show'); // put your modal id
$('.modal-body').show().html(r);
}
});
});
});
</script>
<!-- Modal -->
<div id="myModal" class="modal hide fade in" 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In success function add this code
$('#id1').modal('show'); // you
$('#body').html(r);
Your model should be as below
<div class="modal" id="id1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
...
<div id="body" class="modal-body text-center">
<!-- loading modal.. -->
</div>
..
</div>
Just now I am working on print function using JavaScript to print the content of my website. I can print the content of my site fine with just a direct content. But the problem is that printing the content with bootstrap modal popup seems to be different from what I have done. Below is the printing code of normal content I have implemented.
HTML:
<div id="printArea">
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="mSchedule" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" style="width: 1000px;" >
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<button type="button" id="printer" class="btn btn-info">Print</button>
<h4 class="modal-title">Repayment Schedule</h4>
</div>
<div class="modal-body" id ="schedule-table">
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function(){
$(document).on('click', '#printer', function (event) {
event.preventDefault();
var $print = $("#printArea");
$(document.body).wrapInner('<div style="display: none"></div>');
var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
window.print();
$div.remove();
$(document.body).children().contents().unwrap();
});
});
I know that this code is working fine with printing normal content, But I have no idea how to print a bootstrap popup modal.
Any help really appreciate.