Jump to content



Photo

[Jquery/CSS] Centering a popup window in the screen?


  • Please log in to reply
5 replies to this topic

#1 wvcaudill2

wvcaudill2

    Neowinian

  • Joined: 22-March 07
  • Location: Texas, USA
  • OS: Windows 7 and LinuxMint 16
  • Phone: Android

Posted 28 November 2009 - 14:55

Hello, im trying to make a popup appear in the center of the viewers screen when a button is clicked.

It works fine so far if you dont scroll down, but if you do, then the popup stays at the top and you never see it.

You can see what I mean here: http://www.newtuts.com.
(You have to click on the little red (!) icon.)

How can I fix this?


#2 +Majesticmerc

Majesticmerc

    Resident Idealist

  • Tech Issues Solved: 8
  • Joined: 24-August 05
  • Location: United Kingdom
  • OS: Arch Linux / Win 7
  • Phone: HTC One X

Posted 28 November 2009 - 15:07

In the popup's CSS (and the background overlay CSS), you need to set the positioning to "fixed".

e.g.


.popup
{
	position:fixed;
}

However, this won't work in IE6/7 (which don't support the "Fixed" position value), so you'll have to use some sort of javascript, or CSS "Expression" (which are IE only, and not recommended) for that.

If you're using JQuery though, why don't you use the JQuery UI Dialog Widget, which handles all this for you?

#3 OP wvcaudill2

wvcaudill2

    Neowinian

  • Joined: 22-March 07
  • Location: Texas, USA
  • OS: Windows 7 and LinuxMint 16
  • Phone: Android

Posted 28 November 2009 - 15:51

In the popup's CSS (and the background overlay CSS), you need to set the positioning to "fixed".

e.g.


.popup
{
	position:fixed;
}

However, this won't work in IE6/7 (which don't support the "Fixed" position value), so you'll have to use some sort of javascript, or CSS "Expression" (which are IE only, and not recommended) for that.

If you're using JQuery though, why don't you use the JQuery UI Dialog Widget, which handles all this for you?



I had never even heard of that widget. Im trying to use it now though, and nothing is happening.

In my Jquery code, i put
$(document).ready(function(){

//deadlink dialog
$(function(a[name=deadlink]) {
	$("#deadlink").dialog({
		bgiframe: true,
		height: 140,
		modal: true
	});
});

});

However, nothing is happening.

Edited by wvcaudill2, 28 November 2009 - 15:59.


#4 OP wvcaudill2

wvcaudill2

    Neowinian

  • Joined: 22-March 07
  • Location: Texas, USA
  • OS: Windows 7 and LinuxMint 16
  • Phone: Android

Posted 28 November 2009 - 16:23

nevermind, I think I got it.

Thanks!

#5 +Majesticmerc

Majesticmerc

    Resident Idealist

  • Tech Issues Solved: 8
  • Joined: 24-August 05
  • Location: United Kingdom
  • OS: Arch Linux / Win 7
  • Phone: HTC One X

Posted 28 November 2009 - 19:40

No problem, by the way, I think I marked one of your links as dead by accident, so I apologise :laugh:

#6 OP wvcaudill2

wvcaudill2

    Neowinian

  • Joined: 22-March 07
  • Location: Texas, USA
  • OS: Windows 7 and LinuxMint 16
  • Phone: Android

Posted 28 November 2009 - 20:12

No problem, by the way, I think I marked one of your links as dead by accident, so I apologise :laugh:


Yeah I saw that :p No harm done.