Pop-up close button FIXED on scrolling not WORKING?

[Galanthus]

Hello,

I have a question i am using a pop-up to show content. .I have a close button on the top right side with a class and position fixed i have tried a couple of JQUery tricksand css but it doesn’t sticky or stay at the top.

Image:

Code:

 .modal-dialog .close {
  background:url(../images/bg.png) 9px -557px #e1ba6d;
  display: block;
  height: 50px;
   width: 50px;
  opacity: 1;
  top: auto !important;
  right: -50px;
  padding-left:4px;
  position: fixed;
  z-index: -2;
}

.modal-dialog .close:hover {
  background:url(../images/bg.png) repeat scroll 9px -557px #e2b45e;
}
button .close:hover {
  background:url(../images/bg.png) repeat scroll 9px -557px #e2b45e;
}

.close:hover {
  background:url(../images/bg.png) repeat scroll 9px -557px #e2b45e;
}

[RyanReese]

Do you have a live website to look at? Something else might be at play here. Either way that one snippet isn’t enough to diagnose.

[Galanthus]

http://goo.gl/DpgcJK

There you go. PLease review this… because i have tried to solve this with JQuery and CSS3… but still the close button is not fixed.

[RyanReese]

How do I get the popup…?

[Galanthus]

Above the contact form click on gold text:

veelgestelde vragen.

[PaulOB]

Hi,

You have a ‘transform’ style on .modal-dialogue and children of transformed elements lose their fixed position unfortunately (possible because the element could be transformed and a fixed position would not have much meaning).

The only solution is to remove button-close form that context altogether.

Remember that fixed position elements are relative to the viewport anyway so they don’t have to be in any particular context unless you need auto positioning. Indeed in your example your right-50px would move the close button off the viewport to the right by 50px and be invisible had it worked.

The only way you can do this is to either remove the transforms from modal-dialogue which I guess you don’t want and re-position the close button. O to move the close button to the end of the html and manipulate it into position.

You would do this by creating a fixed positioned container than spans full width then nesting a layout width inner container that uses margin auto and matches the width of your layout onto which you can hang the close button at right -50px.

The other alternative is to leave things as they are and find a script to move the close button up and down as required by viewport scroll.