I want to load an external page in a modal window. by default i've already added some text in the modal window, but i want to delete the text which says "<p> hello folks, good evening</p>" and instead call an external page into the modal window which contains a different message
var openModal = function () {
// close button
var closeBtn = $('Close');
// text you get from Ajax
var content = "<p> hello folks, good evening</p>";
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
};
If you are trying to load a page from an external website I would imagine it would be as simple as loading in an iframe and passing the URL to the site you want to load in. In your JQuery just change this line:
var content = "<p> hello folks, good evening</p>";
to
var content = "<iframe src='http://google.com' width='200' height='200'></iframe>";
Change the properties as needed. Hope that helps.
You can change your content var to equal '<iframe style="border: 0px; " src="YOUR_URL" width="100%" height="100%"></iframe>'. For example, '<iframe style="border: 0px; " src="http://jquery.com/" width="100%" height="100%"></iframe>'
I added your code to a fiddle so you can try it out:
http://jsfiddle.net/4pjndrsc/1/
Hope that helps. Best of luck!
If you prefer to load in the content from an external page rather than embedding an iframe, you can add the $.ajax call into your function:
var openModal = function () {
// close button
var closeBtn = $('Close');
// create the ajax call and create modal in the callback
$.ajax({
url: "content_page.html",
dataType: "html",
success: function (response) {
// text you get from Ajax
var content = response;
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "popup"
}).css({
width: $(window).width() / 0 + "px",
padding: 5 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").popup({
dismissible: false,
history: false,
theme: "b",
/* or a */
positionTo: "window",
overlayTheme: "b",
/* "b" is recommended for overlay */
transition: "pop",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
.addClass("blur-filter");
},
afterclose: function () {
$(this).remove();
$(".blur-filter").removeClass("blur-filter");
},
afteropen: function () {
/* do something */
}
}).popup("open");
},
error: function () {
//handle error here
}
});
};
Related
Below is my jquery code which do following thing:
Load the content form URL and fill into DIV.
Bind the data into html form.
Problem: first time, it bind correct data and after each call, it just load the empty form (and data not populated which called through BindForm function as shown below.)
When I tried replace - tag.html with $("#div").load(url,function(){}) then it works but, using below code not work.
Now, I can not change implementation to use load but, any alternative or solution in below code will helpful.
Basically, I need $("<div id=" + diaolgID + "></div>") line to preserve as it is and then load dialog within this.
var tag = $("<div id=" + diaolgID + "></div>");
$.ajax({
url: url,
cache: false,
success: function(data) {
var htmlContainerObject = tag.html(data);
htmlContainerObject.dialog({
modal: true,
hide: {
effect: "none",
duration: 150
},
show: {
effect: "none",
duration: 150
},
title: title,
width: 950,
height: 'auto'
}).dialog('open');
BindForm();
}
});
Change your first line to this:
var tag = $('<div id="' + diaolgID + '"></div>').appendTo('body');
Got a popup legal notice inside an simplemodal window (iframe) that's working exactly as I expect it to. There's a form in the iframe that when you submit it, the modal window closes and you continue on to your destination - in this case, a "mailto:" link.
Problem is - I need a separate "close" function that doesn't open the mailto link, just closes the modal. Currently, submitting the form OR clicking the "close" link both open the "mailto" link.
What I've got so far:
Inside my iFrame to handle the form submit:
$('#alertFORM').submit(function() {
window.parent.jQuery.modal.close(true);
});
And my functions handling everything else:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "<a href='#'>Close</a>",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});
I believe I understand the problem - both the form submit and the 'close' link call the onClose function. Haven't quite figured out ow to seperate the two yet so only the form submit opens the 'mailto' link.
I've tried changing the code in my iFrame:
$('#alertFORM').submit(function() {
parent.closeModal();
});
... and then back on the parent page at the top of my javascript above:
function closeModal() {
$("#modal").dialog("close");
}
... but that doesn't work.
Actively working on it. Suggestions most appreciated.
Got it finally! Inside the file in my iFrame:
$('#alertFORM').submit(function() {
window.showEmail = "true";
window.parent.jQuery.modal.close(true);
});
$( ".modalCloseImg" ).on('click', function (e) {
window.parent.jQuery.modal.close(true);
});
... and back on the parent page:
onClose: function (dialog) {
window.redirectEmail = window.legalFRAME.showEmail;
if(window.redirectEmail == "true")
{
window.location.href = mailto;
window.legalFRAME.showEmail = "false";
window.redirectEmail = "false";
}
$.modal.close();
}
I use following Code to open an Panel in FooterBar. After 5 times open the panel
nothing happens. FooterBar is not be clickabel. Panel cant be close anymore.
What can I do?
Please advise, Thanks
JavaScript
$("#FooterBar_Stundenerfassung_0").on("click", function () {
// text you get from Ajax
var content = "<h2>Hilfe</h2><ul><li>Probieren geht über Studieren</li><li>Liebe geht über Triebe</li><li>Tante fällt über Kante</li></ul>";
// close button
var closeBtn = $('zurück');
// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
"data-role": "panel"
}).append(content).append(closeBtn);
// Append it to active page
$.mobile.pageContainer.append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("[data-role=panel]").panel({
position: "left",
theme: "a",
display: "overlay",
animate: true,
dismissible: "false",
swipeClose: "false",
beforeposition: function () {
$.mobile.pageContainer.pagecontainer("getActivePage")
},
afterclose: function () {
$(this).remove();
},
afteropen: function () {
/* do something */
}
}).panel("open");
});
End JavaScript
The HTML is includet at the var content and var closeBtn. I have no HTML with Div
I have this sample from a PopUp Example, and there works well.
brgds Ramon
UI experts,
I'm trying to get a slow website loaded in an iframe within a jquery modal dialog, but I'm having trouble. This is my use case:
open a jquery dialog, with a single "loading..." gif
load a different URL in the background
once loaded, replace the gif with the URL
I'm able to open the URL directly with code as below:
var popup = $('<div id="popup123" class="dialog"></div>').prependTo('body');
popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
$('.dialogIFrame').attr("src", 'http://myslowsite');
$('.dialogIFrame').show();
popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500,
});
So my question is - how do I add a "loading..." gif to the mix? Should be possible - but I can't seem to figure out!
Thanks in advance!
Here is an example of creating an iframe, directing it to a site and performing a callback when it finishes loading: http://jsfiddle.net/74nhr/109/
$(document).ready(function() {
var status = $('#status');
var iframe = $('iframe');
status.val('Loading...'); // show wait
iframe.on('load', function() {
status.val('Done!'); // remove wait, done!
});
setTimeout(function() {
iframe.attr('src', 'http://www.archive.org');
},
1000);
});
See this. Hope it helps.. http://jsfiddle.net/CEJhb/1/
var popup = $('<div id="popup123" class="dialog"><img id="load" src="http://jsfiddle.net/img/logo.png" alt="loading..."/></div>').prependTo('body');
popup.prepend('<iframe style="display:none" class="dialogIFrame"></iframe>');
var $iFrame = $('iframe');
$iFrame.load(function() {
$('.dialogIFrame').show();
$('#load').hide();
});
$('.dialogIFrame').attr("src", 'http://www.google.com');
popup.dialog({
modal: true,
title: 'Site',
width: 1000,
height: 500
});
On a website im building on a Joomla CMS i call inside the head tag these javascripts :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');</script>
I have two javascripts inserted on my index.php
One for a slideshow (gallerific) and another one for a dropdown menu.
The slideshow javascript :
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.9;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: true,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
/****************************************************************************************/
/**** Functions to support integration of galleriffic with the jquery.history plugin ****/
// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
// set onlick event for buttons using the jQuery 1.3 live method
$("a[rel='history']").live('click', function(e) {
if (e.button != 0) return true;
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
/****************************************************************************************/
});
</script>
And the dropdown menu:
<script language="javascript" type="text/javascript">
var axm = {
openMenu: function() {
$('#newmenuheader').stop().animate({ 'height':'140px'}, "fast");
},
closeMenu: function() {
$('#newmenuheader').stop().css({'overflow': 'hidden'}).animate({'height':'55px'}, "fast");
},
};
</script>
I can get only one script run at a time not both. If one runs the other doesn't. I need to have them both.
At the time the javascript for the slideshow is running. Is there a conflict of some sort ?
Thanks in advance.
The second chunk of javascript code with the var axm needs to be added to the
jQuery(document).ready(function($) {}
Otherwise the browser doesn't know to run it. And you should re-write this function, don't use
jQuery(document).ready(function($) {}
just use
$(function(){
//your javascript and jQuery here for binding events, styles, and functions
}
this is a function that will run once the page is ready.