Bootstrap - Want hide content's until modal loads - javascript

I'm using jquery modal to load multiple vimeo video's in a single page. I've been noticing that all the video's loading (34) in the DOM affects performance (creating a lag on load). So I want make sure that the video players are only loaded when the shown.bs.modal event has been triggered.
Pretty much a noob here, so I'm not sure how to do this.
Modal:
<div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="modal-footer">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
NOTE: READ COMMENTS ON ACCEPTED ANSWERED

I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.
You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.
var iframes = ["URL1","URL2","URL3"];
$('.modal').on('shown.bs.modal', function() {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
});
You will notice I am referencing a data-id, which you can add to each of your modals very easily.
<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">
I started with 0, since arrays start with 0 index.
***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.
EDIT: Actually, using another data attribute, you can avoid the issue of URLs loading every time. Updated demo.
<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">
Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.
$('.modal').on('shown.bs.modal', function() {
var loaded = $(this).data('loaded');
if(loaded == false) {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
$(this).data('loaded', 'true');
}
});
EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:
var iframes =<?php echo json_encode($php_array);?>;

To clear modal when its closed use
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
For the other part not too sure on what your trying to do. You could look into jScroll so that it will only load the rest of the videos when the user starts to scroll through the modal.
Edit: You could load the content of your modal from an external html file, that way the video iframe will only be loaded when someone clicks on the modal link.

Related

Making a modal window only show once

I use a Bootstrap modal on the index page of my site, but I only want it to show Once per user visit.
I've tried out the answers shown here:
Display A Popup Only Once Per User per-user but the problem I run into is that the javascript "popup" conflicts with my modal "onload". And I'm not sure how to resolve it.
This is my onload function:
$(window).load(function(){
setTimeout(function() {
$('#onload').modal('show');},2000);
});
and this is my HTML:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="onload">
<div class="modal-dialog">
<!-- Modal content-->
</div>
</div>
I tried to wrap the whole modal div with the "popup" div but that did weird things to my website (dimmed the whole page but otherwise did nothing)
I think I need to use a cookie or localStorage but I don't know how to configure them or trigger them from the onload javascript.

script in page loaded via AJAX doesn't execute in modal (BS4)

The following code successfully dynamically loads the "remote" page (data-remote="/booking-app-1") within the modal-body. However, this target page just contains a < script > which loads an IFrame (for an external payment application). This script does not execute. Is there a way to fix this, or a better way to just inject the booking applications's script via its URL directly into the modal-body?
I've also tried swapping the data-remote URL to my page with the URL direct to the booking app's script but this did not work.
<button type="button" class="btn" data-toggle="modal" data-target="#bookingApp-1" data-remote="/booking-app-1" >
BUY THING 1
</button>
<!-- Modal -->
<div class="modal fade" id="bookingApp-1" tabindex="-1" role="dialog" aria-labelledby="bookingApp-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
(CONTENT LOADS HERE)
</div>
</div>
</div>
<script> // I will have multiple modals with different scripts on the page
$('body').on('click.modal.data-api',
'[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data('remote')); });
</script>
/booking-app.php:
<script type="text/javascript" src="https://bookeo.com/widget.js?a=12345&type=1234_not_the_actual_url"></script>

Bootstrap modal at first page load

On page loading i am showing user some bootstrap modal window to show him some information. I would like to show this bootstrap modal only on first time, then every one next should not. How to achieve that? Is there something like function disable after first time? This is my simple code:
$(window).load(function () {
$('#dddd').modal('show')
});
This is a possible duplicate of this
Nevertheless, you can use cookies to achieve this. For your reference the following example is done using jquery cookie
<script src="/path/to/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#dddd’).modal(‘show’);
$.cookie(‘pop’, ’7');
}
});
</script>
add this to your js file:
if(window.sessionStorage.fist_load_modal1 === undefined){
$('.first_load_modal').modal('show')
window.sessionStorage.fist_load_modal1 = true
}
Now you can use the class 'first_load_modal' to show your modal on fist load.
<div class="modal fade first_load_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
CONTENT HERE
</div>
</div>
</div>
Obs: Tested in bootstrap 4

Video with autoplay in a Bootstrap modal with a stop when the modal is closed

I read a lot of similar posts but didn't find the right solution for my project.
I would like to let the user show/hide the bootstrap modal with a simple <a> balise. It's a Youtube iframe with an autoplay=1.
First problem is that when the page load, the video is launching and we can hear the sound but of course cannot see the video inside the bidding modal. Second problem, I need to stop the video when the user closes the modal with the cross or just by clicking outside the modal.
Here is a online demo : See live demo
Here is my code, I'm using Bootstrap 3+ :
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body"></div>
</div>
and the JS :
<script>
$('#myModal').on('show', function () {
$('div.modal-body').html('<iframe width="100%" height="360" src="https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>');
});
$('#myModal').on('hide', function () {
$('div.modal-body').html('');
});
</script>
You could leave the SRC attribute of the iframe blank initially and only set it to the desired YouTube video with autoplay=1 when the user opens the modal window.
HTML:
<div aria-labelledby="myModalLabel" class="modal fade responsive-video" id="myModal" role="dialog" tabindex="-1">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
</div>
<div class="modal-body">
<iframe id="youtube" src="" />
</div>
</div>
JS:
<script>
$('#myModal').on('show', function () {
$('div.modal-body iframe#youtube').attr('src', 'https://www.youtube.com/embed/PUcTN5ou2o0?autoplay=1&rel=0&showinfo=0');
});
$('#myModal').on('hide', function () {
$('div.modal-body iframe#youtube').attr('src', '');
});
</script>
Sorry, can't comment, missing the privilege. So a quick answer with two possible solutions.
Solution 1: use the Youtube API
You can find the API reference here: https://developers.google.com/youtube/iframe_api_reference
So you could create the iframe when showing the page and just use the play() method when launching the modal.
Solution 2: use a premade player
There are lots of good solutions out there. As I'm in the matter right now, I'd recommend using http://afterglowplayer.com (based on video.js) or some other similar solution. There is lightbox support and you don't have to cope with this kind of stuff. :)

IE8 Not Calling Two JavaScript Functions via Onclick Event

Essentially I want to call two functions on onClick event. Works fine in firefox and chrome but NOT IE8!
The first function should call for the modal to appear (modal indicates that the form is in the process of being saved - but it is not appearing) while the second function saves the form and then hide the modal.
HTML
<a onclick="openModal();saveForm();">Click Me</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div id="modal">
<img id="loader" src="static/images/ajax-loader.gif" />
</div>
</div>
JavaScript
function openModal(){
$('#myModal').modal('show');
}
function saveForm(){
//--- some logic
}
Thank you in advance!
I personally don’t like it to listen to an event by adding the "onclick" attribute to an HTML element. Instead, it would be more practical to use .addEventListener. I can also really recommend you jQuery. In jQuery, you would write:
$('a').click(function(){
func1();
func2();
}

Categories