Member Avatar for jackparsana

hi,


please help me to do this.

i want to display one panel on top space.
and

i want one button on that panel to close itself.

please help me.

thanks in advance

Jack

  • 3 Contributors
  • 5 Replies
  • 323 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jackparsana

Dani AI

Generated

A short, modern pattern you can drop in that puts a fixed panel at the top, gives it a close button, and keeps keyboard and screen-reader users happy. This avoids inline onClick handlers and ancient checks like document.layers (thanks to for the starting idea and for the compatibility note). The approach below uses a CSS class for show/hide, an accessible close button, Escape-to-close, and simple focus restore to the opener.

HTML + CSS:

<button id="openPanel">Open panel</button>

<div id="topPanel" class="panel" role="region" aria-labelledby="panelTitle" aria-hidden="true">
  <div class="panel-inner">
    <h2 id="panelTitle">Site notice</h2>
    <button class="panel-close" aria-label="Close panel">X</button>
    <p>Put your message here.</p>
  </div>
</div>

<style>
.panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-110%);
  transition: transform 220ms ease;
  z-index: 9999;
  background: #f5f5f5;
  border-bottom: 1px solid #ccc;
}
.panel.is-open { transform: translateY(0); }
.panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
}
</style>

JavaScript (no inline handlers):

const openBtn = document.getElementById('openPanel');
const panel = document.getElementById('topPanel');
const closeBtn = panel.querySelector('.panel-close');
let lastFocus = null;

function openPanel() {
  lastFocus = document.activeElement;
  panel.classList.add('is-open');
  panel.setAttribute('aria-hidden', 'false');
  closeBtn.focus();
}

function closePanel() {
  panel.classList.remove('is-open');
  panel.setAttribute('aria-hidden', 'true');
  if (lastFocus && lastFocus.focus) lastFocus.focus();
}

openBtn.addEventListener('click', openPanel);
closeBtn.addEventListener('click', closePanel);
document.addEventListener('keydown', e => {
  if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27) && panel.classList.contains('is-open')) {
    closePanel();
  }
});

Troubleshooting & notes: ensure the panel has a higher z-index than page content; use role="dialog" and aria-modal="true" only if the panel is a blocking modal. Respect prefers-reduced-motion if you add animations. If the panel must trap focus while open, use a focus-trap helper or library. This pattern is lightweight, progressive, and should work across current browsers without feature-detection shims.

Recommended Answers

All 5 Replies

Member Avatar for twiss

What did you try? You'll need to write a small javascript thing that hides or removes the element.

Member Avatar for almostbob 
<button id="frorm" onClick="showIt('layer1');">OPEN</button>
<script type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(ID) {
if (dom) {document.getElementById(ID).style.visibility='hidden';}
if (document.layers) {document.layers[ID].visibility='hide';} }
function showIt(ID) {
if (dom) {document.getElementById(ID).style.visibility='visible';}
if (document.layers) {document.layers[ID].visibility='show';} }
--></script>
<div id="layer1" style="position:fixed; left:10px; z-index:10; width:50%; visibility:hidden; padding:10px; margin:10px; background:#ececec; border: 1px solid;">
<button id="form1" onclick="hideIt('layer1');">Close</button>
<br>lorem ipsum bla bla bla bla bla bla bla bla lorem ipsum bla bla bla bla bla bla bla bla bla bla bla lorem ipsum bla bla bla bla bla bla bla bla lorem ipsum bla bla bla bla bla bla bla bla lorem ipsum bla bla bla bla bla bla bla bla lorem ipsum bla bla bla bla bla bla bla bla<br>
<button id="form" onclick="hideIt('layer1');">Close</button></div>

multiple divs can be hidden.shown by their id
styling belongs in the stylesheet, this sample is not optimal

Edited by almostbob because: n/a
Member Avatar for twiss

I don't think you need to check for getElementByID support. I believe IE4 supported it, already.

Member Avatar for almostbob

the DOM you dont recognize is for early netscape & mozilla based browsers,

good practice to support everything, especially when its only a single line of conditional code
belt and braces, versions of mozilla based browsers(firefox) for linux BEOS etc do not support getelementbyid
in a few computer centuries (months), such support will be unncessary, but till everybody uses the same windows12 and ie33, , ,
its good practice to ensure compatibility with other OS/browser combinations
link <-- humor I enjoy the animation

Edited by almostbob because: n/a
Member Avatar for jackparsana

thanks for reply...

thank you for answer..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.