Search the Community
Showing results for tags 'Modal'.
Found 18 results
-
Hi, I'm using PHP smarty (template system). I know how to use w3css MODAL, by including all the modal HTML in the original page. is there a way to open up a separate page, LOOKING like a modal. but a seperate HTML file.. IE, press button 1, open page one.html (as a model - look alike) press button 2, open page two.html (as a model - look alike) press button 3, open page three.html (as a model - look alike) - and a 'close' routine - to update a database (I can do), and close the opened window after button pressed. is this possible?
-
<button type="button" class="buttonvid" data-bs-toggle="tooltip" data-bs-placement="right" data-toggle="modal" data-target="#videoModal" data-video="https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing"> Watch <i class="fa fa-file-pdf-o" aria-hidden="true"></i></button> <!-- Modal --> <div class="modal fade" id="videoModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered modal-lg" role="document"> <div class="modal-content"> <div class="modal-header bg-dark border-dark"> <button type="button" class="close text-white" data-dismiss="modal">×</button> </div> <div class="modal-body bg-dark p-0"> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" allowfullscreen></iframe> </div> </div> </div> </div> </div> <script> $(document).ready(function() { // Set iframe attributes when the show instance method is called $("#videoModal").on("show.bs.modal", function(event) { let button = $(event.relatedTarget); // Button that triggered the modal let url = button.data("video"); // Extract url from data-video attribute console.log(url) $(this).find("iframe").attr({ src : url, allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }); }); // Remove iframe attributes when the modal has finished being hidden from the user $("#videoModal").on("hidden.bs.modal", function() { $("#videoModal iframe").removeAttr("src allow"); }); }); </script> The link "https://drive.google.com/file/d/14Fqgvu07CIAkSp_IP_42e53rRh2Lxv_6/view?usp=sharing" is opening via browser but shows "Forbidden Error 403" when opened via modal
-
Hello, if this is not in the appropriate forum (or has been addressed already), please advise and I will update accordingly. Thank you. I'm updating my ancient website and I decided to use MODALs for my page with videos which embed various videos from various video servers; YouTube, Vimeo, etc.): My website VIDEO page Using: W3.CSS + JavaScript + Bootstrap & JQuery If I wanted to reference a specific video modal from a link (maybe sent in an email) or from another webpage (and have the modal automatically open), how do I do that? I found some code on the web using window.location.hash and it's included in my code at the end, but this does not do what I need (it's close though...). Thank you very much in advance 🙂 My code is below (including only 4 video modals, not all 55) <!DOCTYPE html> <html> <title>Julie Meitz Video & Film</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BOOTSTRAP & JQuery --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="../../css/style.css"> <body> <!-- Horizontal Navbar Main & Work --> <div class="w3-top"> <div class="w3-bar w3-white w3-card w3-border w3-left-align w3-large"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> <a href="../../index.html" class="w3-bar-item w3-button w3-padding-large">Home</a> <!-- <a href="../../index.html#about" class="w3-bar-item w3-button w3-hide-small w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Contact</a> --> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Multimedia</a> <a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-text-white w3-gray">Video</a> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Other</a> </div> <!-- Vertical Sidebar on small screens Main --> <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large" style="padding:10px 0px 10px"> <a href="../../index.html#about" class="w3-bar-item w3-button w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-padding-large">Multimedia</a> <!-- <a href="../videos_films/index.html" class="w3-bar-item w3-button w3-padding-large">Video</a> --> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-padding-large">Other</a> </div> </div> <!-- Video & Film --> <div class="w3-container" style="padding:80px 16px 40px"> <div class="row"> <!-- Using a href (with image) to trigger modal --> <!-- Scrap Video # 1 2017 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF10a" data-src="https://www.youtube.com/embed/bUzUflnktaU" data-vtitle="<a href='https://youtu.be/bUzUflnktaU' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL: Scrap Video # 1 (2017)</a>" data-vdesc="<p> </p><p class='big'><b>Description:</b> An experimental video created from unused video. 2015 : Video of myself on my 49th birthday while testing green screen and involved in art therapy. 2016 : Attempted to work with footage again and applied a Photoshop filter, short video made, but not interesting enough to publish (and too personal). 2017 : Tired of trying to figure out what to do with this footage, so I made this 'scrap' video, including sound effects. Now it's time to get it off my hard drive.</p> <p class='big'><b>Video:</b> Julie Meitz / Vaulx-en-Velin, France 2017</p> <p class='big'><b style='color: red'>Note:</b> This video was not shown at screenings/festivals, I just made it for myself.</p> <p class='big'><b>Skills:</b> Conception, camera, editing, color & correction grading & visual effects</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/scrap-video-1-julie-meitz-0.jpg" alt="Scrap Video # 1" style="width:100%"> <div class="overlay"><div class="text2">Scrap Video # 1<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL</div></div></div> </a> </div> </div> <!-- The Small World / Le Petit Monde 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF1" data-src="https://www.youtube.com/embed/agsb-sXB3L4" data-vtitle="<a href='https://youtu.be/agsb-sXB3L4' target='_blank style' style='text-decoration: underline'>Promotional Video: Le Petit Monde / The Small World (2016)</a>" data-vdesc="<p> </p><p class='big'><b>Description:</b> A promotional video for the international private school <a href='https://lepetitmonde.org/' target='_blank style' style='text-decoration: underline'>Le Petit Monde.</a></p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://incompetech.com/' target='_blank style' style='text-decoration: underline'>Kevin MacLeod - Life of Riley</a> / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, direction, camera, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/le-petit-monde-julie-meitz-0.jpg" alt="The Small World / Le Petit Monde" style="width:100%"> <div class="overlay"><div class="text2">Le Petit Monde /<br>The Small World<hr><div style="letter-spacing: 2px;font-size: 15px">PROMOTIONAL</div></div></div> </a> </div> </div> <!-- DR VoltairEAM / Dream Voltaire (Video Only) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF9" data-src="https://www.youtube.com/embed/zXQ1PCZeeIY" data-vtitle="<a href='https://youtu.be/zXQ1PCZeeIY' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL Video Mapping: DR VoltairEAM / Dream Voltaire (Video Only) (2016)</a>" data-vdesc="<p> </p><p class='big'><b>Description:</b> An original & remix work about Voltaire for the <a href='https://www.ferney-voltaire.fr/' target='_blank style' style='text-decoration: underline'>Fête de Voltaire</a>. Made in a dreamlike, surreal, kitsch and political style using excerpts from his book, Micromegas, various related images and films, historical information and statistical data from Standford University. The video was mapped to Voltaire's old theater, La Maison Fusier.</p> <p class='big'><b>Video:</b> Julie Meitz (artist residency) / <b>Artistic Direction:</b> <a href='https://mobilhomme.weebly.com/' target='_blank style' style='text-decoration: underline'>Mobil'Homme: Philippe Pellier</a> / <b>Credits:</b> <a href='docs/Credits-Dr-Voltairem-Julie-Meitz-2016.txt' target='_blank style' style='text-decoration: underline'>Various AV Sources</a> / <b>Other:</b> <a href='../multimedia_shows/2016-06-voltaire/dr-voltaiream-2016_julie-meitz.pdf' target='_blank style' style='text-decoration: underline'>Program</a> / <a href='../multimedia_shows/2016-06-voltaire/index.html' target='_blank style' style='text-decoration: underline'>MULTIMEDIA VIDEO MAPPING: Photos, info...</a> / <a href='https://flic.kr/s/aHskDg1jLF' target='_blank style' style='text-decoration: underline'>Photos</a> / Ferney-Voltaire, France 06/2016</p> <p class='big'><b>Skills:</b> Conception, research, animation, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art (& Video Mapping)</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (Video Mapping: Resolume Arena 5)</p>"> <img src="images/dr-voltaiream-julie-meitz-0.jpg" alt="DR VoltairEAM / Dream Voltaire" style="width:100%"> <div class="overlay"><div class="text2">DR VoltairEAM /<br>Dream Voltaire<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>Video Mapping</div></div></div> </a> </div> </div> <!-- Electro-Volution Extracts (iKICK! / VJ + DJ) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF2" data-src="https://www.youtube.com/embed/87rzhcq3Ozg" data-vtitle="<a href='https://youtu.be/87rzhcq3Ozg' target='_blank style' style='text-decoration: underline'>Promotional Art Video VJ + DJ: Electro-Volution Extracts for iKICK! (2016)</a>" data-vdesc="<p> </p><p class='big'><b>Description:</b> An experimental black & white video made for my performance with <a href='https://fr-fr.facebook.com/ikick.djamency.atix/' target='_blank style' style='text-decoration: underline'>iKICK!</a>, DJs D'Jamency and Atix. During the performance individual clips of this footage were triggered live in my VJ application, sometimes with VJ effects, sometimes superimposed, etc. This video is a reconstruction of the original footage (which I lost) rebuilt with the VJ DXV files scaled up and synced to the audio.</p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://soundcloud.com/ikick-live' target='_blank style' style='text-decoration: underline'>iKICK! - Techno Live Project</a> / <a href=../vj_fj/images/ikick-julie-meitz-tannerie-2016-fly.jpg target='_blank style' style='text-decoration: underline'>Flyer</a> / <a href='https://flic.kr/s/aHsmXgKBnn' target='_blank style' style='text-decoration: underline'>Images</a> / <a href='https://youtu.be/V2x7l6JneXc' target='_blank style' style='text-decoration: underline'>iKICK! & Julie Meitz Live</a> / Producer: AsenseProd / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, animation, editing, correction grading, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (VJing: Resolume Arena 4 + nanoKONTROL + AKAI LPK25)</p> <p class='big'><b>Related:</b> <a href='https://youtu.be/raU4ltDuxmc' target='_blank style' style='text-decoration: underline'>iKICK! promotional video</a></p>"> <img src="images/electro-volution-julie-meitz-0.jpg" alt="Electro-Volution" style="width:100%"> <div class="overlay"><div class="text2">Electro-Volution<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>VJ + DJ</div></div></div> </a> </div> </div> <!-- OTHER VIDEO MODALS REMOVED--> <!-- Modal Bootstrap JS jQuery--> <div class="modal fade" id="vfModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <!-- <h5 class="modal-title"><a href="https://youtu.be/agsb-sXB3L4" target="_blank style" style="text-decoration: underline">Video: The Small World / Le Petit Monde</a></h5> --> <h5 class="modal-title" id="exampleModalLabel"></h5> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" id="video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="video-desc"></div> </div> </div> </div> </div> </div> </div> <!-- SCRIPTS --> <script> // Used to toggle the menu on small screens when clicking on the menu button function myFunction() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function() { // Gets the video src from the data-src on each a href="#" var $videoSrc; $('.video-link').click(function() { $videoSrc = $(this).data( "src" ); }); console.log($videoSrc); $('#vfModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // button that triggered the modal (but I'm using a href link! but it seems to work?...) var vidTitle = button.data('vtitle') // Extract info from data-* attributes var vidDesc = button.data('vdesc') var vidId = button.data('id') // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) //modal.find('.modal-title').html("<a href=https://youtu.be/agsb-sXB3L4 target='_blank style' style='text-decoration: underline'>Video: The Small World / Le Petit Monde</a>") modal.find('.modal-title').html(vidTitle) modal.find('.video-desc').html(vidDesc) // when the modal is open show video & add ?rel=0 to show only my videos when paused $("#video").attr('src',$videoSrc + "?rel=0" ); }) // when the modal is opened show video & add ?rel=0 to show only my videos when paused //$('#vfModal').on('show.bs.modal', function (e) { //$("#video").attr('src',$videoSrc + "?rel=0" ); //}) // stop playing the youtube video when modal is closed $('#vfModal').on('hide.bs.modal', function (e) { // Remove the src attribute (remove video) before closing modal $("#video").attr('src',''); }) }); </script> <script> // Sending a link from an external page - this only works sending the same modal, how to get it to pick up a specific video modal??? $(document).ready(function() { var modals = ['#vfModal']; if (window.location.hash && ~modals.indexOf(window.location.hash)) { $(window.location.hash).modal(); } }) </script> </body> </html> -
The project has a number of huge word wall pages where its desirable to tag various persons with a popup with their extended info, several dozen per page. After I finish my work on the site, I expect less skilled operators to add content at a later time, so I want to automate as much of the process as I can to prevent typos breaking the pages. There ought to be a way... There really ought to be a way where I can put this.... <button class='w3-button w3-round [Lookup color from argument 3] [lookup hover-color from argument 3]' onclick="document.getElementById('[argument 1]').style.display='inline'">[argument 2]</span> into a shortcut function call like.... <script> nameTag(john_doe123, John, A); </script> Where the output sent to the browser engine is this: <button class='w3-button w3-round w3-red w3-hover-blue' onclick="document.getElementById('john_doe123').style.display='inline'">John</span> There really must be a viable way to not hand code every single instance of those button calls... How do I do it? Every method I've devised so far doesn't work. I feel like the solution is mockingly close too. <script> funtion nameTag(a, b, c) { //assume code here for taking 'C' above and calculating what colors to use// let color1 = "w3-red"; let color2 = "w3-hover-blue"; let result = "\"<span class='w3-tag w3-round\"" + color1 + color2 + "' onClick=\"document.getElementById('" + arg1 + "').style.display='inline'\">" + arg2 + "</span>"; } </script> Which isn't returning anything. I've thought myself into a corner and need help. -
Hello! Newbie here. I'm OK with HTML and CSS, but seriously lack knowledge on JS. Wanting to learn, but I am under the gun to complete a new web site first and I'm stumped on some JS requirements. W3 Schools is a great source of info and learning for me, but I can't seem to find a complete and useful answer yet to this problem. I am making a Products page for my business where I want to show 4 - 6 pictures in a LightBox mode for each of four separate product lines, with all of the products lines shown on one page. Similar to how this company did it on their page: https://sonicenclosures.com/products/. I've come to W3Schools and, to ensure that my first try would be successful, simply copied and pasted their LightBox code from the How To sections into my site. Everything worked fine for the first product line section. I even increased the number of images from four in the sample to six without any issues. Then I added another product line section a few DIVs down the page, and tried to recreate the Lightbox code using the original sample, and this is where everything fell apart. Now, when I click on any picture in my first product line row, the LightBox modal opens, and I can cycle through the images in that product line using the forward/reverse buttons, but when I reach the last image in that product line, it automatically jumps and cycles through the next six pictures of the following product line, which is not what I want it to do. If I try to click on any of the images in the second product line row, it opens the LightBox modal starting with the images from the first product line images, and then scrolls trough to the second line of images. I want each Lightbox to only show it's correlating product line images. I'm sure that there must be some way to do this, as the referenced company's web site seems to work the way I'm looking for. Must be in my unique "IDs" or placement of my code snippets?? I have my CSS called from a separate CSS page, and I've got my JavaScript code at the end of the HTML for the LightBox sections. Can anyone please show me the correct coding to allow me to have multiple separate LightBoxes on one page for individual product line imagery? Hoping someone's out there with the correct info and kind enough to take pity on a poor wretched sole under a demanding deadline, like me! Here's the code that I used - straight out of W3 Schools: CSS: body { font-family: Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; } .row > .column { padding: 0 8px; } .row:after { content: ""; display: table; clear: both; } .column { float: left; width: 25%; } /* The Modal (background) */ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 1200px; } /* The Close Button */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .mySlides { display: none; } .cursor { cursor: pointer; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } HTMIL: <h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="img_nature.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_snow.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_mountains.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="img_lights.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="img_nature_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="img_snow_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="img_mountains_wide.jpg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="img_lights_wide.jpg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow"> </div> <div class="column"> <img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights"> </div> </div> </div> JavaScript: <script> function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>
-
Hi there Is there anyone who can help a javascript Noob? And explain what is missing in my javascript code, so the pop-up only is displayed once per. session. Because right now, it pops up every time I click to a new page. And the idea is that it is should work like the business or consumer popup on dustin.com. Is my Javascrip code. <!--Modal--> <!--modalpopup Business eller privat--> <script> $(document).ready(function(){ //loads when document is ready if (document.cookie.indexOf('modal_shown=') >= 0) { //do nothing if modal_shown cookie is present } else { $('.modal').modal('show'); //show modal pop up document.cookie = 'modal_shown=seen'; //set cookie modal_shown //cookie will expire when browser is closed } }) </script> <script> $ts.ready(function() { $elm('[data-dismiss="modal"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!--test--> <script> $ts.ready(function() { $elm('[data-dismiss="modal-footer"]').onclick = function() { $elm('.container').style.display = 'none'; } }); </script> <!---->
-
I cannot share a link for this due to the confidentiality of the website, but hopefully my ask is fairly simple to answer. I have a landing page with links to certain pages with visibility set to PRIVATE. Of course, if someone clicks a private link, the are redirected to a password page. If they enter the correct password, it reveals the page. Here’s my question: I need a solution for the link to the private page that triggers a popup password entry. This is not a membership site. There will be no roles or usernames. I want the functionality as it is but I don’t want the visitor redirected to a password page… I want the link to trigger a password entry popup. Is this doable? Surely there’s a plugin for this, but I cannot find it.
-
Multiple modal boxes in one image gallery – is it possible?
bartonlewis posted a topic in JavaScript
I want to create an image gallery with a button tag that contains thumbnails which when clicked on open a full-sized image with other content (buy button link, image title etc.). I’m using the code here https://www.w3schools.com/howto/howto_css_modals.asp The issue I’m having is that all images inside the button will open the 1st image loaded into the modal, and that image only. Is there a way to associate different thumbnails with their corresponding full-size image so that the correct image opens in the modal when the corresponding thumbnail is clicked on? Thank you. -
I’m following the W3Schools modal example https://www.w3schools.com/howto/howto_css_modals.asp but I’ve got an issue with caching after changing modal html content. Read a numerous posts on this on the web using is and reset, removedata, etc. but nothing seems to work. Any help highly appreciated. Thanks!
-
I hope there is a simple solution to this. I want to use localStorage to remember a user, but if it's not there I want to open a form so the user can enter the info in the input box and press Submit. Then I would put that info into the localStorage for next time. I can get the form to open and display fine, but the code just continues to execute after I open the form ( display set to "block"). How can I get the code to stop and wait for the input to come in before continuing with the next line of code? I have looked at the <dialog> tag with '.showmodal' which would work I guess, but it says it is not supported in Internet Explorer or FireFox; I want it to work in all browsers. I have tried a while loop to wait until the 'submit' button is pushed, but the whole thing bombs out when I put it in and the modal form doesn't even show. If I assign a value to the input , and insert the line "userID = document.getElementById("enterUserID").value;" just b/4 the return statement, I get the value I assigned. I appreciate any help explaining it to me.... I have included my code if it helps. <!DOCTYPE html> <html> <head> <title>Schenectady Kettles</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link --> <style> #logInModal {display:none;z-index:3;width:80%;height:200px;margin:auto; color:purple;background-color:lemonchiffon;text-align:center; font-size:8vw;font-weight:bold;} </style> </head> <body> <h3>Testing for Log In</h3> <div> <button id="logInBtn" type="button" onclick="logInClicked()">Log In</button><br> </div> <!-- Log In Modal --> <div id="logInModal"> <div> Enter User ID<br> <input type="text" id="enterUserID" placeholder="User ID" autofocus> <!-- Check input !! --> <button type="button" id="getIDBtn">Submit</button> </div> </div> <p id="demo"></p> <script> function logInClicked() { var uID = "hello"; if (typeof(Storage) !== "undefined") { if (localStorage.userID) { uID = localStorage.userID; } else { uID = getUserID(); document.getElementById("demo").innerHTML = uID; } } } function getUserID() { var userID = "123"; document.getElementById("logInModal").style.display = "block"; document.getElementById("getIDBtn").onclick = function() {userID = document.getElementById("enterUserID").value;}; return userID; } </script> </body> </html>
-
Ok I have 2 types of files I want people to be able to get. Article and Calendar. The differences are 1) the file names are a bit different - Year month Article.ext and Calendar month year.ext and 2) the extensions are different - doc for articles, docx for calendar, htm for article, html for calendar. There's a bunch of files so I'd really not have to go changing the file names. Here's the code I have so far. <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } </style> </head> <body> <h2>Please Select Star or Calendar.</h2> <!-- Trigger/Open The Modal --> <button id="myBtn">Monthly Star</button> <!-- The Modal --> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <form> Select the year: <select id="mySelect"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelect1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelect3"> <option>pdf</option> <option>doc</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunction()" value="Click Me!"> <br /> </form> <a id="myLink" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunction() { var obj = document.getElementById("mySelect"); var obj1 = document.getElementById("mySelect1"); var obj3 = document.getElementById("mySelect3"); document.getElementById("myLink").innerHTML = "New Link"; document.getElementById("myLink").href = "http://www.bethlehemvinton.org/Star/" + obj1.options[obj1.selectedIndex].text + " " + obj.options[obj.selectedIndex].text + " Bethlehem Star." + obj3.options[obj3.selectedIndex].text; document.getElementById("myLink").target = "_blank"; } </script> </div> </div> <!-- Trigger/Open The Modal --> <button id="myBtn1">Monthly Calendar</button> <!-- The Modal --> <div id="myModal1" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <form> Select the year: <select id="mySelectC"> <option>2018</option> <option>2017</option> <option>2016</option> <option>2015</option> </select> <br /> Select the month: <select id="mySelectC1"> <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <br /> Select PDF, Word or Webpage: <select id="mySelectC3"> <option>pdf</option> <option>docx</option> <option>htm</option> </select> <br><br> <input type="button" onclick="myFunctionC()" value="Click Me!"> <br /> </form> <a id="myLinkC" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a> <script> function myFunctionC() { var objC = document.getElementById("mySelectC"); var objC1 = document.getElementById("mySelectC1"); var objC3 = document.getElementById("mySelectC3"); document.getElementById("myLinkC").innerHTML = "New Link"; document.getElementById("myLinkC").href = "http://www.bethlehemvinton.org/Star/Calendar for " + objC1.options[obj1.selectedIndex].text + " " + objC3.options[obj3.selectedIndex].text; document.getElementById("myLinkC").target = "_blank"; } // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } // Get the modal var modal1 = document.getElementById('myModal1'); // Get the button that opens the modal var btn1 = document.getElementById("myBtn1"); // Get the <span> element that closes the modal var span1 = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal1.style.display = "block"; } // When the user clicks on <span> (x), close the modal span1.onclick = function() { modal1.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal1) { modal1.style.display = "none"; } } </script> </body> If I do just 1 modal (the first one) it works fine. But when I add the 2nd it breaks so I'm assuming I've got 2 variables somewhere with the same name. 1) is this the easiest way to handle this? 2) I'd rather not have the link "Current..." showing but if I delete it then I can't make it work. I know I could probably do some scripting to create it on button click but ... well, sad to say I'm running out of time to get this done. Any help would be appreciated.
-
When you add a form that is modal and view on a mobile device (apple mostly) the background still scrolls with your finger. This creates a problem as the form fields (Inputs) do not line up and it almost impossible to edit or add text to input fields as you cannot select them. To reproduce just run the modal login example on your mobile phone and move your finger then try to add text to the input fields - !
-
Hi! I am new here and was wondering if I could possibly get some help. I am having some serious trouble trying to figure out why my menu won't sit behind my modal. =( I have wracked my brain trying to figure out what it could be, but have not been able to come up with a conclusion. Please ignore the text as the page is obviously still in testing, but the page shows how the modal goes in front. I also have other issues with IE in that the menu doesn't show up properly, but that may be due to too many style tags? I do very much enjoy my CSS. lol Things have evolved since 2009 ^_^; Here is the link to the page in question and I am attaching the raw files that I think you would need to see where I may have done something wrong. Is it possible that they just aren't compatible? www.technicolor-dreams.net/ani-001.html Thanks in advance! =D -Sarah Also... If you could... Could you explain things as simply as possible? I am not as advanced with coding in knowing all the terminology such as parent and sibling elements. >_<! css.css ani-001.html menu.html
-
Hi, I am going through bootstrap 4 alpha version. But when I tried to create a simple modal I found that it doesn't work in my browser. Can anyone find out what is wrong I am doing? The problem is fixed. It was causing problem because of incorrect data-target attribute. <!DOCTYPE html> <html lang= "en-US"> <head> <meta charset= "utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit= no"/> <title> . Bootstrap</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> </head> <body> <div class= "container"> <div class= "row"> <div class= "col-12"> <h1 class= "alert-info">Live Demo</h1> <div class= "w-100"></div> <button type= "button" class= "btn btn-primary" data-toggle= "modal" data-target= "#liveModal"> Go Live </button> <div class= "modal fade" tabindex="-1" id= "liveModal" role= "dialog" aria-labelledby= "liveModalLabel"> <div class= "modal-dialog" role="document"> <div class= "modal-content"> <div class= "modal-header"> <h5 class= "modal-title">Modal Title</h5> <button class= "close" type="button" data-dismiss= "modal" aria-label= "Close"> <span aria-hidden= "true">×</span> </button> </div> <div class= "modal-body"> <p> Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </body> </html>
-
I see that in the W3.Css demo and templates there is use of forms. When I tried to edit this for use with HTML/PHP The button for the HTML form only works when the Modal Submit is used. <div id="id01" class=" w3-modal" > ... <form action="subscribe.php" method="POST"> <input name="subname" class="w3-input" placeholder="Full Name" type="text" required> <input name="subemail" class="w3-input" placeholder="Email Address" type="text" required> <label class="w3-label w3-validate">Subscribe to e-Mail Newsletter</label> <input class="w3-btn" type="submit" value="Submit"> <p><a class="w3-btn w3-center" href="">Submit</a></p> </form> ... I've also tried the following and the variables are not passed to the php script. ... <form> <input name="subname" class="w3-input" placeholder="Full Name" type="text" required> <input name="subemail" class="w3-input" placeholder="Email Address" type="text" required> <label class="w3-label w3-validate">Subscribe to e-Mail Newsletter</label> <p><a class="w3-btn w3-center" href="subscribe.php">Submit</a></p> </form> ... Any help is appreciated. Thanks Mike
-
Hi, I wanted to create a popup/modal window on my blogger website landing page. This would be a disclaimer and on agreeing users can access the webpage (www.atriumjuris.ga). Can anyone please help!?
-
Hi folks, I really don't know if this is the right section for posting this question, but perhaps some Moderators could move it otherwise? On my website I have a "modal window" which shows a bulleted list of various online stores for digital music. At the moment I have inserted perhaps 100 different stores, and the pop-up box are really long. I need help with creating a fixed size for this window with a scrollbar inside it. CSS part: .text-box-ul li { list-style-type:disc; margin-left:16px; margin-top:5px; } HTML part: <ul class="text-box-ul"><li>Text here</li><li>Text here</li><li>Text here</li><li>Text here</li></ul> The CSS and HTML-parts are located in different folders on the website structure. I would really appreciate all the help I could get! Thanks!
-
Hi all, I'm using a simple example template from Bootstrap and wish to display a modal form when the page loads. I have the code below direct from bootstrap to load the modal form when a button is pressed, but i've tried a few other things to get the modal to appear on load, but none of which is working. I'm sure its something simple, but this is a learning curve for me, so any help appreciated. Code I've got from Bootstrap: <!-- Button to trigger modal --><a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <!-- 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> <h3 id="myModalLabel">Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </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> I've tried using the following to get it to load on the form load: $('#myModal').modal('show') and $(document).ready(function(){ $('#myModal').modal('show')}; neither of which I can seem to get to work. Cheers Col
