I'm using Trussworks and React. The code works for opening a modal window using the ModdleToggleButton. I also have a modal opening with plain text using ModalOpenLink.
The problem is that I also need a modal to open when clicking on an image. I have looked at the Trussworks documentation for using modals and do not see anything about being able to use an image to open a modal.
Does anybody have an example of doing this?
I have a link bound with colorbox. Link contains external link or may be links of same site pages.
$('.previewLink').colorbox({iframe:true, width:"80%", height:"80%"});
<a href="www.blabla.com/print/50" class="previewLink"/>HMMMMM</a>
<a href="/check/test/print/50" class="previewLink"/>HMMMMM</a>
Something like this. Now I want a button on the colorbox body. Similar like the close button. Functionality is simple. I want to click the button and want to go to the link that will be loaded in a new tab. Or whatever I want.
If not button,then a simple link can work for me which will take me to that site in new tab. Question is how can I load a link on iFRAME & colorbox and get a button like close button,functionality defined by me?? I searched how to add a button in colorbox body but didn't find anything. Can anyone help?
I am new here so bare me with some time. I want to open some of the links in my page with an inline popup window.
I guess that those special links have to have a different id attribute that triggers the jquery script
I used the script from this page sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/ that has a simple code with great result
The problem is that this script shows the content of the div and am trying to show the page of the link
Thank you very much for your help and info.
It sounds like you're not trying to show inline content, but just a normal modal with an iframe or ajax. You would probably be better served using fancybox.
Fancybox has good documentation and should be easier for you to set up.
I need to show a page of contents inside my page.
ie; when i click on a link it will show 2 paragraphs inside a div as popup in the same page.
that popup must have a close button in it to close that div popup.
Is any one have an idea or code to help me in this
Thanks.
You could use something like a jQuery modal dialogue box:
Thickbox - apparently no longer maintained.
jQuery UI, recommended by those behind Thickbox.
jqModal
BlockUI
Facebox, which looks much as you'd expect, from the name...
Use hide properties for your div tag.
For hiding
document.getElementById('divid').style.display='none';
For displaying
document.getElementById('divid').style.display='block';
I'm trying to programmatically close a Facebox modal with JavaScript code that's called
within the iframe. That doesn't seem to work well with the JavaScript DOM.
https://github.com/defunkt/facebox
More generally, how would I close a generic modal that embeds an iframe with the code to close it inside the iframe. (sorry for the tounge(or eye) twisting)
Here's my example:
I have a facebox with something like this:
jQuery.facebox("stuff goes here <iframe src="example.php"...." more stuff"); //opens the modal(works great)
Then INSIDE the iframe, I want to call jQuery(document).trigger('close.facebox');. It only seems to work if I call it on the parent page or on the modal page, but not in the actual iframe. Is there a way I can make it close by calling it within an iframe example.php?
Edit: I was asking how I can access the parent frame from inside an iframe with jQuery to oversimplify the question.
You can't modify an element that "belongs" to the parent page from within that popup page. As far as I know you will have to issue your hide code from the parent. You could always have your code inside the dialog do something like this:
parent.$("#dialog").hide();
I think that's what you're asking...
Here's what worked for me:
My page has an IFRAME inside a DIV, the DIV is what facebox is supposed to fadeIn and fadeOut. The SRC of the IFRAME is a page that has a link on it that looks like this:
close this facebox modal
In the HEAD of the page that contains the DIV and IFRAME (NOT the page called into the IFRAME), I have the JavaScript function "close_QM_facebox()" that looks like this:
function close_QM_facebox() { jQuery(document).trigger('close.facebox'); }
That's all. Not tested cross-browser or in production yet. I spent hours Googling this problem and trying everything from changing single quotes to double quotes, document-dot-this and parent-dot-that, window.frames['whatever'], and this one-line function does it. If you're trying to trigger the function from the page that is called into the IFRAME, you have to be sure to use parent.close_QM_facebox(). Hope this helps.
BTW, see lines 47 and 49 of facebox.js ver 1.2 - this solution was right there in the commented-out "Usage" section of the .js file itself. I copied & pasted line 49 into my function, didn't change a thing except un-commenting it :)
The embedded iframe is pointing to a URL on a different domain correct? In this case no, you cannot for security reasons make any calls to the parent document from within the iframe.
I think, you can use FancyBox. There is public methods allowed to close the modal dialog within an iframe, also an option to make the fancy box act like modal window:
- Within an iframe use - parent.$.fancybox.close();
No problem if you use scripting on the same domain, if you want to use cross domain just provide each page (.php/html etc) that call each other an exchange paramater/query safely using POST/GET. But to close the fancybox modal you have to run this methods with the same domain page.
Hope it works for you Stan.