I have a gallery inside my modal window done via Bootstrap.
I want to be able to horizontally scroll within it using this: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/.
The problem is, it scrolls the page behind it, not the actual modal window. When I don't have the Horizontal Scrolling script on, I can scroll in the modal with shift+mousewheel, which is what I want to do width the script(just without using shift ofcourse).
My JSFiddle: http://jsfiddle.net/8XdVt/22/
HTML:
<head>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<h2>Modal Gallery</h2>
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="gallery-modal">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</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>
<h2>Normal Gallery</h2>
<div id="gallery">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</body>
Okay, made it work! All I did was change the scrolling script, so it doesn't scroll in html and body, but on .modal, which is the main class of the modal window!
Updated JSFiddle: http://jsfiddle.net/8XdVt/28/.
Changed
$("html,body").mousewheel(function(event, delta)
To
$(".modal").mousewheel(function(event, delta)
Related
This concept is based on the post Multiple modals overlay
I am trying to create a folder modal, and within every folder modal the user should be able 1) open existing
or
2) create a new file modal
Please run the code below to understand how it works. You will have to click buttons and the list items for opening the modals
But this operates in a bootstrap full screen mode instead of dialog
Clicking on the button creates a folder in the list
When you click the "This is folder ###" it opens a modal as shown below
Now I could create a file
The issue is that needs to be fixed is when file item is cliked, the file modal should overlay on top of the folder modal, But now its closing and both modals wont stay.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
<script>
$("#addnewfolder").click(function(event) {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`<li class="list-group-item">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5" data-bs-toggle="modal" href="#modal-toggle-${code}">This is folder ${code}<br />
<div>
<div class="modal fade" id="modal-toggle-${code}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder ${code}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group file"></ul>
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}`).modal("show");
$(`.file-${code}`).click(function(event) {
var dcode = Math.floor(Math.random() * 10);
$(".file").append(`<li class="list-group-item">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">This is file inside ${code}-${dcode}<br />
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
<div>
<div class="modal fade" id="modal-toggle-${code}-${dcode}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}-${dcode}`).modal("show");
});
});
$(document).on('show.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
</script>
</body>
Don't stack Bootstrap modals.
Bootstrap only supports one modal window at a time. Nested modals
aren’t supported as we believe them to be poor user experiences.
https://getbootstrap.com/docs/5.2/components/modal/#how-it-works
Toggle between multiple modals with some clever placement of the
data-bs-target and data-bs-toggle attributes. Please note multiple
modals cannot be open at the same time—this method simply toggles
between two separate modals.
https://getbootstrap.com/docs/5.2/components/modal/#toggle-between-modals
Therefore toggle the modals instead of stacking them. Better UX and no need for any z-index tricks.
Your issue.
With that out of the way, the reason why the modal is closing when clicking the "Add File" button is because...
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
...you have a data-bs-target & -toggle on your button that creates a new 'file'. This will toggle modal #modal-toggle2, and since it doesn't exists on your page you get the error of an undefined modal.
You also have a few typos, like forgetting to close a <div> in a few places.
Your solution...
Appends the modal to the body, not the <li> element.
Uses the data attributes data-bs-target and data-bs-toggle to toggle the modals.
Features a "Go back to folder" button when accessing the 'file' modal.
$(document).ready(function() {
$("#addnewfolder").click(function() {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5">This is folder ${code}</div>
</li>
`);
$('body').append(`
<div class="modal fade" id="modal-${code}" tabindex="-1" aria-labelledby="modal-${code}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-label">Folder ${code}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button class="btn btn-primary file-${code}">Add new File</button>
<ul class="list-group file"></ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
`)
$(`.file-${code}`).click(function() {
var dcode = Math.floor(Math.random() * 10);
$(this).closest('.modal').find('.file').append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}-${dcode}">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">
This is file inside ${code}-${dcode}
<br>
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
</div>
</li>
`)
$('body').append(`
<div class="modal fade" id="modal-${code}-${dcode}" tabindex="-1" aria-labelledby="modal-${code}-${dcode}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-${dcode}-label">File ${code}-${dcode}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Hello World</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal-${code}" >Go back to folder ${code}</button>
</div>
</div>
</div>
</div>
`)
})
})
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
If you also want the top-right close button (X) in the 'File' modal to act as going back to the 'folder' modal, simply do:
<button type="button" class="btn-close" data-bs-toggle="modal" data-bs-target="#modal-${code}" aria-label="Close"></button>
I simply copied the example from Bootstrap 5 docs, but the first modal is not hidden if I open the 2nd modal from within the modal popup. Why?
You can see that the backdrop is also a bit darker for the 2nd popup, which is because the 2nd one is simply overlayed on the 1st one, without hiding the prior modal.
I also tried it locally with same result: the 1st modal is never hidden.
Interestingly it works as expected on the bootstrap docs website...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/neog0236/1/
I see that your JSFiddle demo uses an older library version. When I update that it works. See the Highlights section of the 5.1.1 release notes.
var myModalEl = document.querySelector('#scheduleMeetingModal');
var myModal = bootstrap.Modal.getOrCreateInstance(myModalEl);
myModal.hide();
Im trying to load a modal after a 3 second page load delay
The code below opens the modal however i cannot close it and the grey overlay is on top of the content etc
Code below
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#myModal').modal();
}, 3000);
});
</script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join IQ Option Today</h4>
</div>
<div class="modal-body text-center">
<a target="_blank" href="mylink"><img src="myimage.jpg" width="300" height="600" /></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Fixed!
My css contained z-index:1
I've commented that out and it now works perfectly!
I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?
Gallery:
<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
<div class="ftg-items">
<div class="tile">
<a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/voodooDesign.png">
<span class='title'>Voodoo Design Co.</span>
<span class='subtitle'>Logo Design and Branding</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/godzillaPoster.png">
<span class='title'>Godzilla (2014)</span>
<span class='subtitle'>Poster Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/ironAirType.png">
<span class='title'>Iron & Air</span>
<span class='subtitle'>Game Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/aquamanType.png">
<span class='title'>Aquaman</span>
<span class='subtitle'>Movie Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/allbikesWeb.png">
<span class='title'>AllBikes.com.au</span>
<span class='subtitle'>Website Design and Development</span>
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
</div>
</div>
</div>
Remote Modal:
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-center">
<img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
<p>Title Design/Typeface Exploration</p>
</div>
<div class="col-sm-6">
<h4>Project Info:</h4>
<p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
<hr>
<p>blah blah blah blah</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
ModalReset JavaScript:
$("#myModal").on('hidden.bs.modal', function () {
$("#myModal").removeClass('fade').modal('hide');
$(this).data('bs.modal', null);
});
I did something similar a while back...
I used one modal and pulled in the content from an external file.
each modal would load new content into the same modal with something like this
$("#info").click(function(){
var url = HOST_NAME+"info/modal-data";
$( "#modal-body" ).load(url, function() {
$( "#modal-body" ).show("slow");
});
loadModal();
});
and open the modal with this
function loadModal() {
$( "#modal-body .page-wrapper" ).remove();
$( "#modal-body" ).hide();
$('#edit').modal();
}
Modal
<div class="modal fade" id="edit" 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>
</div>
<div id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
</div>
</div>
</div>
</div>
I'm looking to implement a series of bootstrap modals with previous/next arrows and a carousel between them.
Here's where I'm at:
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<
>
</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>
This page demonstrates the behaviour I'm looking to emulate.
How would I write a script in order to switch modals on click of either a.carousel-prev or a.carousel-next?
I think you have your terminology slightly off, the linked page has one modal, with one carousel, which has multiple slides.
This is basically what you are looking for.
<!-- Modal -->
<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>
</div>
<div class="modal-body">
<!-- Carousel Start-->
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
Slide 1
</div>
<div class="item">
Slide 2
</div>
<div class="item">
Slide 3
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- Carousel End -->
</div>
</div>