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...
Related
I am working on a website for a school project and I had made a modal gallery to show some pages of a brochure. So to test I made a seperate document to see if it would work and it did. But ofcourse when I tried to put it in my correct webpage it didn't.
It should be in the blue GIP section but instead it is on the bottom of the page and I can't seem to get it to go up. Also the whole gallery is broken but that is not for this sub I think.
Thank you to anyone that tries to help.
Test: http://www.vseppe.gc-m.be/Gip/test.html
Webpage: http://www.vseppe.gc-m.be/Gip/index.html
I can't figure out how to paste the code correctly in here, please comment or message if you need it.
Folks,
I have a website template where i have a gallery. When i click on the image it opens in a new window although the template has a Jquery ( Lightbox ) which probably causes the photographs to come in a pop up. I am not able to use it owing to lack of technical know how. I tried a lot but am not getting any success. Can someone have a look and help me out.
Here is the link to the files
Kindly open them in Visual Studio. Thanks a lot.
Refer the following link and make changes accordingly to your code,understand it and Implement.
http://www.aspdotnet-suresh.com/2011/12/jquery-lightbox-image-slideshow-gallary.html
I have done all the personalizing on this template now, being not too familar to code. But it also has a modenizr.js attached, which adds an animated loading screen before opening the site. My problem is I don't want the screen to be there as it doesn't disappear after page is loaded just sits ontop of my site.
Any tips or guidance would be greatly appreciated.
Thanks DamianL.
Can you complete your question with some link, and even explaining what you have done to this template please?
Anyway i can suggest you to open the "developer tools" (usually pressing f12) and using the inspector trying to figure out wich is the element that doesn't disappear, and maybe also why.
Im sorry, this is not a real answer, but i don't have enough reputation to just add a comment asking for more info.
I'm working on a site that is using Highslide JS to create a slideshow window of larger product images when an image on the product page is clicked. I'm also using Piotr Rochala's fine jQuery plugin, slimScroll, as an alternative to ugly browser default scrollers on the same page.
The problem occurs when a product image is clicked, creating a new .highslide-controls div behind the slideshow that should only be in the top of the slideshow window. The div gets appended with each click, which I believe I've narrowed down to a conflict with the slimScroll script.
See: http://www.thelifeguardstore.com/newproductcart/pc/viewPrd.asp?idproduct=7409
I've attempted using jQuery's noConflict(), changing up the orders of when scripts are called, and looking at each script's JS code, but can't find exactly what's causing the problem. Although I have a feeling it's probably right in front of me, laughing maniacally.
Any help or clues as to what may be causing the issue is greatly appreciated.
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/