Modal Positioning in Firefox WordPress

• REFUNDED

Hello,

I am using the jquery reveal plugin to display modals/popups and they look normal on safari and chrome. However, in firefox one of them is getting messed up.. I feel like I am just missing something very obvious so I am seeking help.

There is actually two modals on the page, and one appears just fine, but the other gets stuck at the bottom of the page. I tried removing the first modal, but that didn't help.

You can see both here: http://hookahi.com/

The one that works pops up if you click the register link in the top right corner. The one that doesn't work appears if you click the email logo/button in the bottom right corner.

When I inspect the item I see that it is trying to load the code I have which is "top: 20px !important", but for whatever reason the element comes up reading anywhere from "top: 361px" to "top: 280px" etc. I am guessing it has something to do with the fixed position, but I am not sure why this is the only situation this is happening.

Answers (2)

2012-08-31

Michael Caputo answers:

In my experience, the modal window always appears centered according to the container that it is positioned in. So is it possible to move the code for the pop up down to the bottom of the page before the </body> tag?

---

Kyle comments:

To clarify, you mean the code for the information displayed inside the modal once it is triggered correct? So for reveal modals it is this:

<div id="triggerID" class="reveal-modal">Content</div>

If that's what you mean then yes, I have tried placing it in most of the major areas: head, header, body, content loop, footer, after footer, after body.

---

Michael Caputo comments:

ok, a few suggestions:

1) Remove the CSS you've put in the header (Before the Doctype).
2) Try putting in a proper HTML5 doctype (currently it's set to XHTML 1.0 Transitional)
3) I noticed that there are a bunch of validation issues - you might want to run the site through a validator and resolve as many issues as you can (http://validator.w3.org/) - i'm available to do this for you, but $5 wouldn't cover it.

2012-09-01

Manoj Raj answers:

Try the following

Go to line 54 in your reveal.js located in genesis/lib/js

Replace the following code

/*---------------------------
Create Modal BG
----------------------------*/
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}

with the following

/*---------------------------
Create Modal BG
----------------------------*/

if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
} else if ( modalBG.length == 1 ) {
modalBG.remove();
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}


Cheers,
Manoj.

---

Kyle comments:

Thanks for the reply

I tried this out, but didn't get a result. I have not tried playing with the js at all, so that could be a really good idea.