Drop down message on page load

JavaScript
1

Is there a good drop down message that loads at page load? Click and “X” to dismiss it. Sort of like a welcome mention. I can’t seem to find one in my search so if anybody has one or can lead me in the right direction, I would appreciate.

2

How do you mean “drop down message”?

Do you mean something like a modal? (without the time delay)

3

I wasn’t looking for a modal since I already have one on the page. I tried the modal and couldn’t get it to work. Perhaps a conflict with existing modal code. When referring to drop down - you open the page and a message box comes down from top of page and then a message box is placed at a absolute position. I tried one at dynamic drive and couldn’t get it to work, probably because it’s an old example.

4

Got a link to the dynamic drive script?

5

Here’s a CSS one (although it abuses the checkbox hack).

You could change the checkbox hack to a js class toggle instead and use mostly the same code.

3 Likes
6

Here is the link, thank you.
http://www.dynamicdrive.com/dynamicindex17/dropinbox.htm

7

Not really sure what you mean by that. Can you clarify for me. Thank you.

8

That is indeed an old script and is pretty heavy for what it does (uses jQuery and jQuery.easing). It’d be a better idea to go with Paul’s CSS solution.

If you’re adamant that you want to use the dynamic drive script, can you post a link to a page where this is not working.

9

Both versions are deeply irritating to somebody who prefers keyboard navigation and expects Esc to dismiss pop-up windows. (And for some folk, it’s not a preference but a necessity.)

1 Like
10

Oh yeah, couldn’t agree more. That was actually why I wrote the article linked above, as people seem to be set on doing this, so I at least wanted to present an accessible solution.

1 Like
11

I would agree with you. PaulOB is a very smart and I am looking into to that, thanks.

13

The checkbox hack is useful but not really what a checkbox was designed for but does come useful in certain situations. However a lot of the time more complicated behaviours are probably best left to JS.

Here’s a JS version of that message box although css does the heavy lifting.

@James_Hibbard can probably tidy that JS up a bit though :slight_smile:

Added that in to the JS demo :slight_smile:

1 Like
14 
(function(d) {
  "use strict";

  var closeMessage = d.querySelector(".closeMe");
  var bodyEl = d.querySelector("body");
  bodyEl.classList.add("js");
  closeMessage.addEventListener("click", function(event) {
    bodyEl.classList.add("closeIt");
  });
  d.addEventListener("keyup", function(e) {
    if (e.keyCode === 27) bodyEl.classList.add("closeIt");
  });
})(document);

I’d assume only one of these per page, which makes the code a little simpler.

1 Like
15

There’s two classes of .closeMe actually. One on the X button in the message itself and one for the dark full page overlay itself so that the background outside of the message can be clicked to close as well.

I’ve added the last snippet in anyway thanks.

if (e.keyCode === 27) bodyEl.classList.add("closeIt");

I should have remembered the triple equals by now :slight_smile:

1 Like
16

Oh missed that.

1 Like
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.