I am currently developing a div that will contain up to 4 Media type divs. The media types include images, PDFs, and Youtube videos. The code I currently have running creates the divs as imgs if possible. If it is not possible(youtube videos/pdfs) it opens them as IFrames. As of now, the user is able to click on the imgs which launches a modal. However, I am unable to to get the IFrames to show the modal.Here is my code HTML - Modal
<!-- Modal -->
<div id="mediaModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">title</h4>
</div>
<div class="modal-body">
<p>here would be the description</p>
</div>
<div class="modal-media">
<p>here is the media</p>
</div>
<div class="modal-footer">
<p>here would be the credits
</div>
</div>
</div>
</div>
Here is my javascirpt
//this creates img/iframes dynamcially and throws them into a media-container div
var source = null;
//if it is not a youtube video/pdf/txt, put it in a img tag
if( null == ( media[1].match(/pdf/i) || media[1].match(/txt/i) || media[1].match(/youtube.com/) ) )
{
source = "<img data-toggle='modal' data-target='#mediaModal' id='m" + i + "'src='"+ media[1] + "'<img>";
}
else //throw it in a iframe tag
{
source = "<iframe data-toggle='modal' data-target='#mediaModal' class='modz' id='m" + i + "'src='"+ media[1] + "'></iframe>";
}
var div = $(source);
$("#media-container").append(div);
I tried adding a class to the iFrame and adding an onClick method, but it does not seem like the IFrame is picking up a click.
//opens a modal box for IFrame media.
$(".modz").on("click", function(e){
console.log("BING");
$("#mediaModal").modal('show');
});
Any help would be awesome. Thank you!
You can find your answer by folowing the step in this answer:
stackoverflow.com adding-click-event-handler-to-iframe
Related
I'm trying to load content into a modal using intercooler, example here:
http://jsfiddle.net/qvpy3coL/3/
I'm having no joy and wonder if this is possible, or whether the bootstrap js will conflict?
Html is:
<div id="confirm-me" class="btn btn-primary" data-toggle="modal"
data-target="#msgmodal" ic-get-from="/click" ic-target="dynamiccontent"
ic-trigger="click">
Click Me to show dynamic modal</div>
<div class="modal fade" id="msgmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Below will be dynamic content</h4>
</div>
<div id="dynamiccontent">
</div>
</div>
</div>
</div>
js is:
// mockjax stuff ...
$.mockjax({
url: "/click",
responseTime: 500,
response: function (settings) {
this.responseText = "Dynamic stuff here!";
}
});
I've never used intercooler but after a quick read it turns out there should be no problem.
The only requirement with dynamic content you want in the modal is that it should be valid HTML code.
I played with the example you put in some content:
$('#dynamiccontent').html('No, it wont have any problems as long as your placing HTML')
https://jsfiddle.net/5pe6yz0w/3/
I have main HTML file and JavaScript file I have used modal in my project on button click the modal from another file would be shown, I have used the code but it's not working.
On button click in function search() the modal should be shown and the modal.HTML content is based according to the id passed
I am getting errors are
Uncaught TypeError: $(...).modal is not a function
at HTMLButtonElement.<anonymous> (main.js:6)
at HTMLDocument.dispatch (jquery.min.js:3)
at HTMLDocument.q.handle (jquery.min.js:3)
Here is the code
index.html
<body>
<!--some code-->
<div id="mymodal"> </div>
</body>
main.js
$(document).ready(function() {
$('.Links').on('click', '[data-toggle="modal"]', function() {
var id = $(this).attr('id');
$('#mymodal').modal('show').find('.modal-body').load("next.html?id="+id);
});
$("#submit").click(function() {
Search(search);
});
});
function Search(search) {
'<button class="button Links" data-toggle="modal" id='+id+'>See Details</button>'
}
next.html
<div id="mymodal2" 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">Model Box</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Update:
I was having error because of not including the files properly. Now i have solved them but problem is half solved. Now when button clicked the screen became dull like when modal is shown and background became dull but in my case no modal is shown
I'm trying to open a modal when clicking on a node within a network map i have made using vis.js
I am unsure about where I would place the data-target tag,but I'm not sure if that's the issue, below is the JS that I have written to handle a click action as well as the modal
Currently the data-target is declared within the div tag where the network map is placed after it has been generated (I know this is wrong)
The JS is being Generated in PHP hence the PHP var being thrown in there
Click Action -
network.on( 'click', function(properties) {
var ids = properties.nodes;
var clickedNodes = ".$nodes.".get(ids);
console.log('clicked nodes:', clickedNodes);
console.log('/monitoring/loadNode/'+clickedNodes[0].id);
$( '#myModalDeviceDetails' ).html('<h1><center><font color=\'white\'>Loading</font></center></h1>');
$( '#myModalDeviceDetails' ).load( '/monitoring/loadNode/'+clickedNodes[0].id ).show();
});
Modal-
<div class="modal fade modal-primary" id="myModalDeviceDetails" tabindex="-1" role="dialog" aria-labelledby="Device Details">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Device Details</h4>
</div>
<div class="modal-body">
loading...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance!
I can see that is a bootstrap modal. It has functions like the following:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
I would recommend hiding the modal when you load the page and than just show it.
I found two similar answers here but both were unsuccessful for my situation (given my limited ability to translate them to my situation). I have a page with a lot of fairly large images and the default method of Bootstrap is to load all the modal images upon page load. The visible html renders fairly quickly (I have a spinner for that) but the additional load time for the hidden modals makes the page impractical. I want the page to load only the visible (non-modal) content to complete the page load (and clear the spinner) and then load each modal's content only when that modal is fired. I've tried every lazyload solution I could find but the images will not render in the modal (the 'data-src' placeholders render but not the 'src' images that are supposed to replace them). I only want to lazyload (or load on 'show.bs.modal') the large images of the modal, those within the 'modal-body' class. I hope this is clear enough.
Sample code:
/* Javascript placed in the head */
<script>
function lazyLoad(){
var $images = $('.lazy_load');
$images.each(function(){
var $img = $(this),
src = $img.attr('data-src');
$img
.on('load',imgLoaded($img[0]))
.attr('src',src);
});
};
$('.modal-body').on("show.bs.modal", function () {
lazyLoad();
};
</script>
/* HTML in the modal section */
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="galleryheader">
<img src="headerimage_1.png" height="77" width="1024">
</div>
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
<div class="modal-body lazy_load">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="images/largeimage_1A.jpg" height="585" width="800"class="img-centered" alt=""/>
</div>
</div>
</div>
</div>
<div class="close-lower" data-dismiss="modal">
<IMG SRC="images/close.jpg" WIDTH="85" HEIGHT="32"></a>
</div>
</div>
</div>
</div>
Firstly, put the lazy_load class on the img element, not on the parent div. Secondly the jQuery you need is something like this:
$('.portfolio-modal').on("show.bs.modal", function () {
$('.lazy_load').each(function(){
var img = $(this);
img.attr('src', img.data('src'));
});
});
Notes:
Use the portfolio-modal class to identify the modal.
Use the jQuery data() method to get the image to lazily load.
I have a small script that stops YouTube videos from playing after their modals are closed. The issue is it doesn't work if the HTML has been loaded via AJAX.
Script:
$('#panelModal-1').on('hidden.bs.modal', function () {
callPlayer('yt-player-1', 'stopVideo');
});
$('#panelModal-2').on('hidden.bs.modal', function () {
callPlayer('yt-player-2', 'stopVideo');
});
HTML (curly braces denote data pulled from CMS):
<li>
<a href="#" title="Watch Video" data-toggle="modal" data-target="#panelModal-{count}">
<div class="video-background" style="background-image:url(http://img.youtube.com/vi/{video_youtube_id}/hqdefault.jpg)"></div>
<div class="video-details">
<h4>{title}</h4>
<p>{video_subtitle}</p>
</div>
</a>
<!-- Modal -->
<div class="modal fade" id="panelModal-{count}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-{count}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel-{count}">{title}</h4>
</div>
<div class="modal-body">
<div id="yt-player-{count}" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{video_youtube_id}?enablejsapi=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</li>
The AJAX part is this:
$(document).ready(function()
{
$('.sub-nav').delegate('.load-case-studies', 'click', function(e)
{
// Don't follow the link
e.preventDefault();
$('.sub-nav a').removeClass('active');
$(this).addClass('active');
// Fetch the next page
$.get($(this).attr('href'), function(data)
{
// Only grab the part of the page we want
content = $(data).find('.ajax-wrapper').hide();
// Add it to the DOM
$(content).replaceAll('#entry-container');
// Fade-in our new content
$(content).fadeIn('fast');
});
});
});
How can I get the videos to stop playing after the modal is closed, if the data has been loaded via AJAX?
you can use following jQuery command.
$('#playerID').get(0).stopVideo();
If your using Player API :
var player = new YT.Player('player');
player.stopVideo();