0

I am new to HTML and jQuery development. I am working on a project in which I want to create a pop up which is open by default whenever the page is reloaded. The pop up should be positioned in the bottom right (same as Facebook chat).

I have searched a lot, but cant find any thing. I am stuck now.

ali_m
  • 71,714
  • 23
  • 223
  • 298
Mitul Maheshwari
  • 2,647
  • 4
  • 24
  • 38
  • 2
    You pretty much know what you want to achieve, if you can show us what you have tried it would be easier to help you. – Harry Aug 14 '14 at 15:23
  • Facebook uses a
    -element as "Popup". The real browser popup is an extra browser window.
     – Reporter Aug 14 '14 at 15:25
  • @reporter Things have changed a lot. Popup now refers to something that visually resembles a popup, just like the word dialog does not mean what it used to. Times have changed - accept it mate :) – Reinstate Monica Cellio Aug 14 '14 at 15:27
  • Shall the popup only pop up if the page is reloaded (eg by hitting F5) or when it's loaded in general (eg by navigating to it)? – paolo Aug 14 '14 at 15:27
  • @Archer Don't worry Archer, I accept that. But it doesn't change the fact that the integrated popup blocker does not work with divs :-) – Reporter Aug 14 '14 at 15:30
  • @reporter I think you're going off on a tangent. He wants to show an element that he refers to as a popup. He doesn't want `window.open()` - I guarantee that. – Reinstate Monica Cellio Aug 14 '14 at 15:31
  • @Archer I knew that he asekd for a div element, because he mentiond the word 'facebook'. I just wanted to mention the abuse of word 'popup'. – Reporter Aug 15 '14 at 08:38

1 Answers1

0

Try positioning an element with a fixed position. A fixed position means that the element is positioned relative to the viewport.

.popup{
    position: fixed;
    bottom: 0;
    right: 0;
}

The element will be shown by default when the page is loaded. You could add in a small button and use JavaScript to show and hide the pop up using jQuery's .toggle();:

$('.button').on('click', function(){
    $('.popup').toggle();
});

Sources:

MDN - CSS positioning

CSS Tricks - Absolute, Relative, Fixed Positioning: How Do They Differ?

jQuery API Documentation - .toggle()

Bill
  • 3,478
  • 23
  • 42
  • I didn't down-vote, but I'd say it's because it has nothing to do with showing something when the page reloads. You should clarify that with the OP before answering, really. – Reinstate Monica Cellio Aug 14 '14 at 15:29
  • Probably. But elements are shown on the page when it loads by default, so nothing needs to be done. I will add this into my answer. – Bill Aug 14 '14 at 15:31
  • @Billy you wrote "The OP required the popup to be "open by default whenever the page is reloaded". Using JavaScript to show the pop up means that if someone has JS turned off they will not see the pop up, so this method is actually flawed". Isn't it true for your method too? – U r s u s Aug 14 '14 at 15:48
  • No... my pop up is visible by default, without JavaScript. @Dura – Bill Aug 14 '14 at 16:05