How do we make a pop up in HTML at the start of a website?

Community Off Topic
1

How do we make a pop up in html at the start of a website?

2

In the real world, we wouldn’t. That is the surest way to establish a website as something to block.

2 Likes
3

Ok I might not want to try that…

1 Like
4

Once the client has established a sufficient connection with the host we can run interstitial script which can be tastefully executed. If mismanaged it becomes intrusive, though, so we best be on our awares.

5

As @mtf said any content you would want to put in a pop up can be tastefully worked into the main content of the site.

Many annoying sites who continuously ask if you want to leave their page etc. quickly make pop ups using confirm() alert() or prompt() these are useful javascript functions but shouldnt be used without reason.

1 Like
6

Yeah, definitely make sure you aren’t using a native JS popup unless it’s in response to an action, like clicking a button or something. Otherwise, it brings focus back to that tab, regardless of which tab the user was on before, and Chrome won’t let you switch tabs without taking care of the JS popup (which is super annoying and one of the many reasons I prefer Firefox).

But if you want to do a popup, there’s a bunch of methods. Do you have any goals, like making it keyboard accessible, or CSS-only, or anything?

1 Like
7

@zystvan I don’t have any specific aims. So?

8

@mtf Thank you for your help.

9

Actually, I am trying to make it keyboard accessible.

10

What do you mean by that ?

If you want special features on your website I command jQuery slide effects ect

11

I mean I can make the user type in it @zainabrawat

12

Forms ?

Forms can be created with HTML - click here for more info

But you will need PHP to get the info stored in a database ect

13

@krishach OK then. jQuery is the easiest thing when you’re starting out, so I’d recommend you use that, although I only use it when I have to, usually.

You’ll need to create some sort of base HTML structure. I normally do something like this:

<div class="popup-container">
  <div class="popup-background"></div>
     <!-- ↓ the only time an id should ever be used is with js -->
  <button id="popup-close" class="popup-close">&times;</div>
                                          <!-- ↑ that turns into this character: × -->
  <div class="popup">
    <!-- popup content goes here -->
  </div>
</div>

Then, you would style .popup-background to be the full page width and have a black, partially transparent background (for example, rgba(0, 0, 0, 0.8)), and .popup-close to be (probably) around 30px font size, white, and 30px-ish away from top and left of the page, as well as remove all the default button styles provided by the browser. After that, you can style .popup however you want (I recommend centering it both vertically and horizontally, though) and put your content in it!

And finally, you get to the functionality with JavaScript/jQuery. Start on the HTML/CSS part first though and let us know if you need help, and we’ll get to the functionality soon :slight_smile:

1 Like
14

If you need a step by step for what @zystvan is saying, this is good: http://inspirationalpixels.com/tutorials/custom-popup-modal

1 Like
15

I really wouldnt reccomend that. There is a more “stylish” alert,prompt, and confirm using sweet alert. Docs found here.

So if you want a alert you do:
swal(“Here’s a message!”, “It’s pretty, isn’t it?”)

16

oo looks great!
If you’re going for looks though it’s always a better challenge to make your own!

1 Like