I am trying to open a dijit.Dialog when the user clicks on a link.
Furthermore, I want for this dialog to fetch the remote content of the iframe (e.g. the google home page) when the dialog opens and not when the page containing the dialog loads.
Here is the JS:
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
function showDialog() {
console.log('showDialog');
dojo.byId('ifr').src = 'http://www.google.fr';
dijit.byId('dialogOne').show();
}
var link = dojo.byId('link');
dojo.connect(link, 'onclick', showDialog);
Here is the HTML:
open link
<div id="dialogOne" data-dojo-type="dijit.Dialog" title="My external dialog">
<iframe id='ifr' width='300px' height='450px'> </iframe>
</div>
Here is the jsfiddle: http://jsfiddle.net/8eenG/6/
However, this doesn't seem to work...
I totally misread your question and went ahead and starting hacking away.
This doesn't load remote content, but it fixes all of your other problems.
See demo here: http://jsfiddle.net/5uuCX/
Javascript
require(["dojo/parser", "dojo/on", "dojo/dom", "dijit/registry"],
function(parser, on, dom, registry) {
parser.parse();
on(dom.byId("link"), "click", function(e) {
registry.byId('dialogOne').show();
});
});
HTML
Click to Open Dialog
<div id="dialogOne" data-dojo-type="dijit/Dialog" title="My external dialog">
<div id="foo" data-dojo-type="dojox/layout/ContentPane" href="http://fiddle.jshell.net/259fD/show/">
</div>
</div>
Related
I tried to search in StackOverflow and I found similar solutions for my problem but I just can't make this work.
HTML EXAMPLE:
<iframe id="iframeA">
<!-- Here i open a dialog "**divOffirstDialog**"-->
<div id="divOffirstDialog">
<iframe id="iframeB">
...(contents)...
<button onclick="openSecondDialog('divOfsecondDialog')">
<div id="divOfsecondDialog"></div>
</iframe>
</div>
</iframe>
WORKFLOW:
Open dialog divOffirstDialog in iframeA -> inside dialog open divOfsecondDialog to open the second dialog.
PROBLEM:
The second dialog opens inside the first one.
QUESTION:
How can i open the second dialog above/outside the first dialog. How can i open ouside iframeB in iframeA?
NOTE:
Both iframes are in same domain.
I need to take the following code that was originally used to open a pop-up message when the user clicked on the image, and change it to open when the webpage finishes loading. How would I go about doing this while keeping the same basic code format (i.e. no <script> in Head?)
I tried changing onclick to onload and this solution did not work.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img alt="" src="/Portals/0/Images/Banner/banner-mobile-cafeteria.jpg" class="banner-img" />
</a>
<div id="light" class="white_content">
please click
here.
(Note, by clicking the link you will be leaving the Midwest Folding Products website. <br /> <br />
To return, please click here.
</div> <div id="fade" class="black_overlay"></div>
First of all it makes little sens to me to show an element after page load. You could make the css of the div you want to show display:block instead and forget any javascript. But that's not the question so..
If I understood correctly you want to open a pop up when page is loaded:
Javascript:
This will trigger the function to be launched after the page is loaded (and open a pop up):
<script>
window.onload = function () {
window.open ("http://www.yourlink.com","title");
}
</script>
or if it's the visibility you wanna change :
<script>
window.onload = function () {
document.getElementById("#yourElement").style.display = 'block';
}
</script>
Using jquery you can open a pop up on page load like this :
<script>
$( document ).ready(function() {
$(function() {
window.open ("http://www.yourlink.com","title");
});
});
</script>
You then commented you want a dialog to open after the page load which is not your original question but w.e :
For that check jquery dialog. Setting modal true will darken the screen behind it. You need to have the jquery library for that (google it).
<div id="dialog-message" title="Important information">
hi
</div>
<script>
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"YES": function() {
$(this).dialog("close");
}
}
});
</script>
You may be able to move your event handler to the body tag:
<body onload="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Anchors do not have onload events, so you can't leave it there.
I have a link like this
COME HERE
I want to open the popup.html file as a jquery popup. And I cant have it inside the current page as a <div> with an id. I must have it out side the current file.
And I cant use dialog's as it reloads the current page. Any idea on how to do it?
Inside the popup.html I am using just a single header.
Or any methods through which I can avoid the page being reloaded when dialog is closed?
Use .load() to load popup.html into a placeholder (i.e <div id="PopupPH">). This placeholder can be placed either inside data-role="page or outside it, depending on jQuery Mobile version you are using.
Moreover, in popup.html, you need to change data-role=page" to data-role="popup in order to treat it as a popup not a page.
jQuery Mobile 1.4
Insert placeholder inside body tag or data-role="page" and load popup.html.
<body>
<div data-role="page">
</div>
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</body>
Or
<body>
<div data-role="page">
<div id="PopupPH">
<!-- placeholder for popup -->
</div>
</div>
</body>
Load popup.html into placeholder
$("#PopupPH").load("popup.html");
Inside popup.html popup div, add JS to create, open and remove popup once it's closed.
<div data-role="popup">
<!-- contents -->
<script>
$("[data-role=popup]").enhanceWithin().popup({
afterclose: function () {
$(this).remove();
}
}).popup("open");
</script>
</div>
jQuery Mobile 1.3 and below
Do the same as above, except for popup placeholder should be inside data-role="page", because jQM 1.3 doesn't support external popup. Also, replace .enhanceWithin() with .trigger("create").
Using the frames & popups in jQuery mobile, you can simply include an iframe inside, although dialogs are still probably your better bet. (Especially as a click outside the popup.. kills it)
<div class="hidden">
<div data-role="popup" id="externalpage">
<iframe src="http://www.bbc.com"
width="480"
height="320"
seamless>
</iframe>
</div>
</div>
<a href='#externalpage'
data-rel="popup"
data-role="button">COME HERE</a>
<script>
$(document).on("pageinit", function() {
$( "#externalpage" ).on({
popupbeforeposition: function( event, ui ) {
console.log( event.target );
}
});
});
</script>
Demo: http://jsfiddle.net/tcS8B/
jQuery Mobile Dialogs don't refresh the page I don't think, it simply masks it with a new background for focused attention.
Try
Test
When I try to open a URL using Iframe in a dialog JQuery box, I got this: http://s15.postimg.org/7qzx5y8vv/Sem_t_tulo.png
Here is my code: http://pastebin.com/Wqf0mGhZ
I want to make the dialog shows ALL the content, thanks...
EDIT:
Hey guys, I achieved this by putting the iframe in a div tag, like this:
<div id="imgWindow" title="this is a dialog" style="display:none;">
<iframe width="100%" height="100%" id="iframeImg" marginheight="0" frameborder="0>
</iframe>
</div>
I didn't go through all of your code, but maybe you
can just add autoResize call to open callback (on Dialog):
function openDialog(stringURL) {
$("#imgWindows").attr("src", stringURL);
$("#imgWindows").dialog("open", {
callback: function() {
autoResize('imgWindows');
}
});
}
In my meteor based application i am using an I frame to show some contents to the user. It is working properly. But i want to place a close button which unloads the Iframe from the template when clicked.
I tried it as in the code given below by placing a button, but I am unable to get click event on it. means button click is not working. I am working with iframes for the first time.
Is this the right way to unload an iframe?
If not then how can i unload it, or what is the best way to unload an Iframe?
<template name="preview">
<div style='display:none'>
<div id='preview' style='padding:10px; background:#fff;'>
<button id="close_content_file">Close</button>
<iframe frameborder="1" src="{{preview_url}}" align="left" width="100%" height="500px" >
</iframe>
</div>
</div>
Template.preview.events({
'click #close_content_file':function(){
console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
},
});
I placed a <button></button> in the div to close or unload the Iframe. but click is not working on that button.If I place the button in the div which is hidden. The button is working there. Iframe is opening on the complete screen. means it over lays the omplete screen as bootstrap modal dialogbox.can i place a button in the Iframe itself? . help will be appreciable
There is an issue with the binding of event with the button. Use this way.
$("#close_content_file").bind("click", function() {
//console.log(" previev butoon has been clicked");
$("#preview").fadeOut();
});
I don't know which JS lib you are using, and also I'm a little confused about the
<div style='display:none'>
but I make a little modification so it works fine with jQuery ,
here is the link http://jsfiddle.net/QHxac/