I found an excellent tutorial online in which the opening of a CSS box creates a "blanket" layer in the background.
http://www.pat-burt.com/csspopup.html
^Just click "Click Here To Open The Pop Up"
However, I can't get the same effect to work with iFrames. What happens is the blanket layer goes over the iFrame and the background of the page.
Any suggestions as to how this can be done?
Edit:
Ok so I use a script to create an iframe based on the link.
So would I just add z-index in after height?
What you are asking for is pretty much what shadowbox does, its pretty easy to add too and is fully stylable.
http://www.shadowbox-js.com/
Related
I love the elegance of iziModal.js and I would like to switch to it on my website. However, during tests I'm having problems opening the modal. Everything works as it should except that the overlay opens on top of the modal window. Ive tried to fiddle with the css and the js but cannot make it happen. The only way you can interact with the modal window is by using "overlay: false" or change "zindex:" to a very high number like 9999999999999999999999999 both options opening the modal without overlay.
Can you help with this issue, please?
Example can be seen on
https://squareplate.co.uk/3
The website is still in development :)
Scroll down to the "Report error" and "Claim listing" area and click on the "modal" link to see it in action.
Florin, Thank you for your feedback. This and other improvements you find in the next update of iziModal (v1.5.0). I promise it will be soon.
Managed to fix it by enclosing the whole website content in a div with id body between <body> and </body> and change the iziModal.js from
that.$overlay.appendTo('body'); to that.$overlay.appendTo('#body');
Now everything works great...
Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!
I'm using colorbox to display an Iframe of my website's sign up page. Like so...
As you can see at the very bottom of the Iframe there is a white bar where the close 'X' used to be. I've removed every part of the border I can see to understand exists... Here is my JQuery for that...
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
$("#cboxClose").remove();
As far as I can tell this should be everything.
Add
$("#cboxLoadedContent").hide();
to the end of your jquery.colorbox.js file. :)
Used browser inspector and found it.
I know how to grey out (adding grey color) to the whole website by a click of a button using css .
But here is an interesting scenario. I have a small IFrame embedded in the main website. Inside the Iframe I have a button. On-click the button I need to grey out the entire website. Currently I am only able to grey out the IFrame contents and not the entire website. If somebody can help me regarding this that would be great.
IFrame contents are on the same domain as the website but on different paths. For example if the website is xyz.com, the iframe contents displayed on that website are in xyz.com/cms.
Note: I only have access to the code sitting inside IFrame and not the outside bit. Hence I cannot code outside IFrame. Whatever I need to code I have to do it inside the IFrame.
Can't we do anything to window object to grey out the entire window?
I think setting the grey to when the iframe window has focus may work for you.
You didn't include any code so not sure if you're using jQuery, but try something like this.
while($(iframe).focus()){
$('document').addClass('grey-out');
}
I'm looking for an example that shows how to display an image as an overlay in a browser while blurring/greying out the contents from the main browser window, here's an example...
http://fstopgear.com/product/satori-exp/view
Just click on any backpack image, then click any part of the browser to close the image..that's pretty much the functionality I'm looking for, I'm assuming there's a script or package that provides such control?
There are plenty of solutions as jQuery plugins for this. What you want is called "modal" or "overlay" window.
I recommend FancyBox: http://fancybox.net/
But also check out ColorBox: http://www.jacklmoore.com/colorbox
There are lot of solutions to get this done in jQuery. Please have a look into the following url's:
http://leandrovieira.com/projects/jquery/lightbox/
http://jquery.com/demo/thickbox/
http://fancyapps.com/fancybox/#examples