Develop Reference

How to load dynamically the content of a Modal (Bootstrap 4)

I'm setting up a web site rich of images.
I've designed it as a landing page: all content has to be on the main HTML page, without flow in others, actually there is the only index.html.
This will be the official website of a Theater, the images are all related to their shows.
To estimate the number of images:
40 shows an almost 40 pics per show (About 600kb per Image)
Almost 1gb of pictures in the same page!
Every show is represented with an image and when you click the Show image a Modal is opened showing the related pics in a grid and information about it.
I'm using Bootstrap 4, Jquery and CSS.
The problem is: if I add all the modals (with the pics in it) to HTML page my website get very lazy and doesn't ** load properly**.
I'm searching a way to load dynamically the pics every time you click on the show, avoiding to load the Dom with ALL the pictures from the first moment.
I've tried with Jquery injection, but is very hard to handle when the modal is open and when modal is closed and I don't think that is a proper and strict way to code.
I was thinking about a PHP server manipulation of images.
Php elaborate and minimize the images to make thumbnail so when images are seen in a grid they are not in the full size, and only when images are clicked they shown in full size (with lightbox.js).
But I'm a complete noob with PHP, and I didn't find an easy tutorial.
I'm opened to any solution you think I can implement, mostly to those who care about SEO optimization and faster loading time for client!
<!-- MODAL EXAMPLE -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-full " data-dismiss="modal">
<div class="modal-content mx-auto">
<div class="modal-body">
<div class="column mx-auto">
<div class="sidebar-box">
<h2 class="title">SHOW TITLE</h2>
<h2 class="subtitle"> SHOW SUBTITLE</h2>
<p class="middle">MIDDLE INFORMATION</p>
<p class="description">SHOW DESCRIPTION</p>
</div>
</div>
<div class="column mx-auto">
<!-- THERE WILL BE ALL THE IMAGES IN A GRID-->
<div class="row justify-content-center">
<a href="stages/alesi/alesi1.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi1.JPG" alt="" />
</a>
<a href="stages/alesi/alesi2.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi2.JPG" alt="" />
</a>
<a href="stages/alesi/alesi3.JPG" data-title="Fotografia ©" data-lightbox="alesi">
<img src="stages/alesi/alesi3.JPG" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Thank you very much to all stack overflow community!

One way to do it is with AJAX, yeah, you can have the content of each modal into a different HTML/PHP file, and on click on the modal to make an AJAX request, and putting the specific modal content(html file) into the page.
So, basically, you will have the whole <div class="modal-body"> div in a different HTML file, and on modal click you will have something like that
$("the_modal").click(function(){
$.ajax({url: "modal1.html", success: function(result){
$("#myModal modal-content").append(result);
}});
});
Of course, you can put data attributes on the modal and use them in the AJAX, so it will work for all the modal across the website.
The other thing that will help a lot is optimizing the images, reducing the size, the quality.

If your main problem is the amount of images that will have to be loaded delaying your page so I suggest that you try to implement images lazy-loading. This is going to enhance the performance of your website since your images will load only when they are shown in the viewport.
There is a jQuery plugin you can use for that: jQuery.Lazy()

You can use this link to refer how to load dynamic data in a single bootstrap modal.
https://getbootstrap.com/docs/4.3/components/modal/#varying-modal-content
If you have the show data in database or JSON file, you can then pass the id of the show which is clicked in the data attribute as given in above example.
Then using modal event show.bs.modal, you can fire an ajax call, which will populate the required data in the .modal-body and on close you can clear the data from the modal.

I would advise against loading 40pics x 600k by default. You need to be thinking about mobile users.
I would use a gallery script (I recommend Photo Swipe) and a request to a server-side script returning a json that will be used to create the gallery only on demand.
Check this page: https://photoswipe.com/documentation/custom-html-in-slides.html

Foundation 6 Reveal Modal Renders at Bottom of HTML Document

I've noted that whenever I create a Foundation 6 Reveal Modal the actual HTML is placed at the bottom/end of the document regardless of where the actual reveal modal is placed in my HTML code.
Although this is fine most of the time I've ran into an edge case where I need to place a form partial inside a modal. The issue is that the modal is placed outside the form_tag as the Foundation Javascript moves it to the end of the HTML document. I've been able to work around it but it makes my code much more complicated than it needs to be.
Is there any easy fix to change where the foundation modal is placed in the HTML document? Is there any particular reason that modals are placed at the end of the HTML document? Unfortunately I could not find anything on the docs, Foundation forums or SO.
Example psuedocode:
<div id="first-div">
<div class="reveal" id="modal" data-reveal></div>
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
Output in browser is:
<div id="first-div">
<!-- this is empty now -->
</div>
<div id="second-div">
<p>Some stuff here</p>
</div>
<!-- reveal modal is moved to end of HTML document -->
<div class="reveal-overlay">
<div class="reveal" id="modal" data-reveal></div>
</div>
Edit:
Attached a Codepen noting the output issue. The modal opens and closes as exected but when inspecting the output HTML the reveal modal is moved to the end of the HTML document - it's actually below the tags at the bottom.
https://codepen.io/matt_hen/pen/RZZBQM

You need to specify where your modal needs to pop up. I forked your codepen
$('#first-div').foundation('reveal', 'open');
https://codepen.io/titse/pen/ayygrW
Let me know if you need more help

This works on Foundation 6:
You need to override the Foundation default appendTo variable for Reveal. That can be done the following ways:
Add a data-append-to="div#first-div" tag on the Reveal div to specify the parent element for the Reveal modal and, if applicable, overlay divs. This allows you to change the parent element individually for each Reveal modal.
Source: Foundation Documentation
Change the default value for the Reveal module globally by specifying the override default value when you initialize Foundation with Foundation.Reveal.defaults.appendTo = "div#first-div"
Source: Foundation Docs
In my testing, setting the parent to a smaller div inside the body element did not adversely affect the positioning of the modal or the display of the background overlay.
Specifying the parent in the call (e.g. $('#myDiv').foundation('reveal','open); does not work in the current release of Foundation.

Open Page in New Tab Using JavaScript

I can't figure out how to open a new tab using JavaScript. I went through related questions but nothing worked for me. I want the browser to open a new tab when someone clicks on the link (example.com) below. What code should I add and where should I place that code?
My html code is here -
<section id="work-grid" class="site-inner">
<div class="work-item" data-groups='["all", "webdesign"]' data-url="http://example.com">
<figure class="image-container"><img src="images/work/web-one.jpg" /></figure>
</div>

Use the target attribute which specifies where to open the linked document,
Example
or in javascript,
function myFunction() {
// Open the link in new browser window.
window.open("http://example.com");
}

I can't see element from code HTML.
and data-groups='["all", "webdesign"]' data-url="http://example.com" from #work-item using for?
From HTML Code.
<section id="work-grid" class="site-inner">
<div class="work-item">
<figure class="image-container"><img src="images/work/web-one.jpg" onclick="openNewTabLink('example.com')"/></figure>
</div>
From Javascript Code.
function openNewTabLink(link){window.open(link,'_blank');}

can't get popeasy jquery modal lightbox plugin to work

So, after looking at many jquery modal plugins, I like the PopEasy ( http://thomasgrauer.com/popeasy/ ), but I copy and paste the provided code into a page on my server and no-workey.
Do the same with jsFiddle, same problem. The overlay fires, but the modal doesn't pop up. I'm sure that I'm doing one simple thing wrong.
http://jsfiddle.net/birchy/Kkw2L/5/
<a class="modalLink" href="#">Click Me
<div class="overlay"></div>
<div class="modal">
Close Me
content here
</div>

It appears to be a missing anchor close tag in the author's code.

How make something like Facebook Notifications?

Please, read all the question before thinking wrong things.
I'm trying to implement a Facebook Notifications system like, but I need some help for style this. I already make the notifications, the back-end works perfectly, but I'm using a workaround for style - and truste me, this is slow, ugly and can't provide to me a good way to style the source.
What I'm exatcly talking about is the actions that occurs between "user click in Notifications" and "user receive loaded Notifications". I'm talking about the style of this part. Things like "how I can open a box with loaded notifications?" after click in a button/div/image/text.
Okay, let's continue with that.
Now I'm using Fancybox to create my notifications box - yes, FANCYBOX! Following is the visual that I get with Fancybox after click in "notifications" button (the "0"):
This may appears beautiful for you, but for me it's ugly - and this is really, really slow.
For make this workaround, I disabled the images of Fancybox, so when it loads, it loads without the black background, the "X" to close the window and other things. Following is my code.
Partially responsable for header:
<!-- This is the html generated by Ruby on Rails,number is dynamic-->
0
<script>
$(document).ready(function(){
$(".various").fancybox({
openEffect: 'none',
closeEffect: 'none',
prevEffect: 'none',
nextEffect: 'none',
fitToView : false,
autoSize: false,
scrolling: 'auto',
maxWidth:300,
maxHeight:500,
padding: 0,
leftRatio: 0.86,
topRatio: 0.18
});
});
</script>
This is generated HTML of notifications/index/ (for pratical example):
<div class="post group">
<div class="notifications-content">
<div class="group" id="notification-0">
<div class="post-middle">
<div class="notifications-title">
<b>Bruno postou:</b>
</div>
<div class="post-middle-text">
ADO
</div>
<div class="post-middle-actions with-dots">
<label> Postado às 12:34 de 17 de October</label>
</div>
</div>
</div>
</div>
<div class="notifications-content">
<div class="group" id="notification-1">
<div class="post-middle">
<div class="notifications-title">
<b>Fernando Paladini postou:</b>
</div>
<div class="post-middle-text">
hummmmmmmmm #boilo
</div>
<div class="post-middle-actions with-dots">
<label> Postado às 12:36 de 17 de October</label>
</div>
</div>
</div>
</div>
<div class="notifications-content">
<div class="group" id="notification-2">
<div class="post-middle">
<div class="notifications-title">
<b>#Ramon Diogo postou:</b>
</div>
<div class="post-middle-text">
http://www.youtube.com/watch?v=A3zPI-DBf7U
</div>
<div class="post-middle-actions with-dots">
<label></label>
<label>Comentado às 12:47 de 17 de October</label>
</div>
</div>
</div>
</div>
</div>
How I can do that with just HTML, CSS and jQuery / JS? I mean, this effects of when click on button open a "box" with the loaded contents, and when click out closes the "box". I really, really have no idea how to make this. Actually I'm using Fancybox opening a modal, but I don't want open a model, I want make this like Facebook and sites like Trello do - just css/jquery.
Note that I'm not asking for code, I need help because I don't have any ideia how to do this. I want the instructions: what I need make to when click the button, open the notifications box. Or when click outside notification box, close the notification box. The concepts behind this, but I will consider if you post some code too, because will help me with the learning.

You can do that with absolute positioning on the div that contains your notifications.
It should be hidden as a default behavior and you make it visible on click with javascript.
This will help you: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/ but you should change the behavior to react to the click event instead of mouseenter (line 14 of the script part). Replace that part with something like:
$(this).click(function(e) {
$(this).find("ul").stop(true, true).slideDown();
e.preventDefault();
});
notice the "preventDefault part? that is to avoid the browser to enter the link when you click.