I am working with this modal that I like but I am able to place only one modal to the page. I have unsuccessfully attempted to add a second one (or multiples). Can this be done by essentially using the same code with minor changes?
What I want to add is a second or third “information2.asp” or “information3.asp”. This obviously place the text into the modal. Works great for the first one!
window.onload = function () {
var openModal = document.querySelector('[data-open-modal]')
var closeModal = document.querySelector('.modal-close')
var modalOverlay = document.querySelector('.modal-overlay')
var modalInner = document.querySelector('.modal-inner')
var handleShowModal = function (event) {
modalOverlay.classList.add('visible')
}
var handleHideModal = function (event) {
modalOverlay.classList.remove('active')
}
var handleOpenModal = function (event) {
event.preventDefault()
modalOverlay.classList.add('active')
// Wait a tick to kickoff the animation
window.setTimeout(handleShowModal)
}
var handleCloseModal = function (event) {
if (event.target !== event.currentTarget) {
// Only hide the modal when clicking elements the handler
// got actually attached to, not others from which the
// event bubbles up to the target (e.g. the modal content)
return;
}
event.preventDefault()
modalOverlay.classList.remove('visible')
// Hide the modal when the fading out is finished
modalOverlay.addEventListener(
'transitionend',
handleHideModal, {
once: true,
passive: true
}
)
}
openModal.addEventListener('click', handleOpenModal)
closeModal.addEventListener('click', handleCloseModal)
modalInner.addEventListener('click', handleCloseModal)
} //]]>
Could you please make a minimal demo of the lightbox in action and post a link to it here. This should contain only the code necessary for the lightbox to run.
Can you explain what you mean or want? That’s all the code that I use for the modal to work. The asp file just holds the text and has no code in it. When I click on the a href link the asp file goes to the modal. If this clarifies, I am not using images, just text in the asp file.
I have users still using IE11. Can a minor tweak be made for that to happen?
Your example places the 2 links together. I would probably have more uses when the links are in different areas of the page. How can those be separated? And, does your example work with multiple links?
Oh, bad luck. You can always run the code through this to make it compatible.
Alternatively, change the following lines:
var [...openModalLinks] = document.querySelectorAll('[data-open-modal]')
var [...modalContent] = document.querySelectorAll('div[class^="modal-content-"]')
to:
var openModalLinks = Array.prototype.slice.call(document.querySelectorAll('[data-open-modal]'))
var modalContent = Array.prototype.slice.call(document.querySelectorAll('div[class^="modal-content-"]'))
The links can be anywhere on the page.
With some slight tweaking, for sure. Why not give it a try?
In analyzing your version from the one that I originally submitted is a nice tutorial for adding additional links, which I tried and was successful at adding those link. Pretty simple and easy to follow.
I was comparing the css and JS between the 2 of them and it looks like there is enough difference which is the reason you can use other links to the same code with minor additions. Like:
I am not sure what that means but if you mean you want more than one modal to show at a time then by the common definition of modal you are not making the windows modal. Modal usually means only one at a time. As best as I can tell everything you are doing is modal in name only, but calling the CSS and other stuff modal might be confusing for others that look at the code and/or others that might help you.
The version I submitted works fine in IE11. Your version which I prefer because it is easy to add multiple links is the one that I am struggling with to work in IE11. When you clink on the link the modal doesn’t open.
One thing that I don’t like about modals, and perhaps because I haven’t figured it out, how do you print JUST what is in the modal?
With onclick="window.open and a sized window (and I know this is being replaced by modals) all that prints is the page that is in the window.
So my question is, without additional coding to the main page, is there code that when I have an include file in the modal, and I have a print button on that information, how can I just print that information and not the underlying page?
I don’t disagree with your point and I am trying to take my onclick="window.open’s and convert them into modals. Most are instructional information and I do track the frequency of the “Print this page” clicks, and they are numerous.
Will look into your link as from what I can determine, it’s different with modals. I will explore.
I know how to do a media=print, display:none on the main page so when you print the contents of the modal the main page is hidden and not printed.
So what I was saying, and my thoughts, is that most users don’t know the difference between a new page on the screen vs a modal; they never will. The user thinks that if it on the screen it can be printed if they want it, whether it has a print button or not - just right click and print.
It’s not up to me to decide whether they want to print it or not. Most users don’t really know even how to take a screen shot of the modal and then save it. So they print it. I don’t want the user to think that I have a lousy website that when they print a modal it looks all messed up because it’s printing the underlying page.
I am looking at this as a business man and not a developer who has superior knowledge. Therefore, I think that all modals should have the ability to print just the information in the modal by not having to hide the page beneath it.
Therefore, it would be good as a practical design and common use that with a modal, since it often has a white background and looks printable, it should be printable. That’s all!
Actually it’s surprising to me that modals weren’t set up that way in the beginning of it’s use. It just makes sense to me to do it that way. I was looking at some example of that on Stackover, but they do look rather complex. I am going to see what I can come up with to use it as a standard with your really nice example of multiple modals to the page. It would seem, but I am sure it’s not, rather simple to wrap some code in the CSS on the modal content and then wrap code in the div’s on the main page with the modals to accomplish this. So still looking into to that. Sorry for the long explanation, but I hope I have clarified my point.