Geek asks and answers

How to show notification over the screen?

I would like to use the jQuery Notifications plugin , but it always places the notification bar at the top of the page. Therefore, if the page is large, you need to scroll up to see the notification.

Is it possible that the notification always appears at the top of the browser window, so the user does not need to scroll to the top of the page?

Is it CSS if it needs to be changed somewhere?

/* jQuery Notifications plugin - http://programmingmind.com */
/* notification container */
#jquery-notifications {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100000;
}
#jquery-notifications p {
  text-align: center;
  position: relative;
  margin: 0;
  padding: 5px;
  padding-left: 10px;
  border-bottom: 2px solid;
  /* style property for the close text */
}
#jquery-notifications p a {
  position: absolute;
  right: 10px;
  margin-right: 10px;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding-right: 5px;
  padding-left: 5px;
}
#jquery-notifications .notice {
  background: #6c9ffc;
  color: #061a72;
  border-color: #061a72;
}
#jquery-notifications .success {
  background: #96f96f;
  color: #045419;
  border-color: #045419;
}
#jquery-notifications .warning {
  background: #f7ae57;
  color: #753903;
  border-color: #753903;
}
#jquery-notifications .error {
  background: #f97c6f;
  color: #570f01;
  border-color: #570f01;
}
+3
source share
2 answers

Not knowing how markup is used, I cannot give an exact solution.

But adding position: fixed;to the container (# jquery-notifications) should always appear at the top.

+7
source

Change it ...

#jquery-notifications {
  position: relative;
  ...
}

... to that...

#jquery-notifications {
  position: fixed;
  ...
}

, .

+8

More articles:


All Articles