Member Avatar for tomjrjones

i want to make a popup div for my games section in my website, so when i click an image a sort of layer pops up (not a new window) i need it so i can add swf games to it, what do i need to do or can anybody send me a link to a scipt or possibly make me one

  • 5 Contributors
  • 4 Replies
  • 131 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rosy12

Dani AI

Generated

For a simple popup container you can follow the lightweight routes suggested by and (lightbox or a dialog). Those are quick to implement, and ’s show/hide idea is a useful minimal fallback. The important gap for this thread is the file type: SWF (Flash) is effectively obsolete in modern browsers, so embedding raw SWFs will usually fail for visitors today. See Adobe’s Flash EOL note for details: Adobe Flash Player end-of-life. If you must run old SWFs, consider a compatibility shim like Ruffle (a WebAssembly-based player that can run many SWFs) or convert the game to HTML5/Canvas/JS for long-term support.

Implementation checklist and tips:

  • Use a modal overlay (plugin or custom) with an accessible role/ARIA attributes and keyboard handling (trap focus, ESC to close, restore focus to the opener). See the browser-native dialog element docs for modern guidance: dialog - MDN.
  • Embed the SWF only after the modal opens; when closing, remove the embedded element from the DOM to stop audio and free resources. Example cleanup pattern:
document.getElementById('close').addEventListener('click', function () {
  const modal = document.getElementById('gameModal');
  const media = modal.querySelector('object, embed, iframe, .ruffle');
  if (media) media.remove();
  modal.style.display = 'none';
  openerButton.focus(); // restore focus to opener
});

Troubleshooting notes: a black/blank area usually means the browser blocked Flash — try Ruffle or convert the game. If audio keeps playing after close, ensure the player element is removed or explicitly stopped. If using iframes, watch for cross-origin restrictions and Content-Security-Policy headers.

Recommended Answers

All 4 Replies

Member Avatar for bkimbriel

Use a jquery light box (google it). There are tons of free lightboxes out there.

There is also a way to do it with CSS3 however I wouldn't recommend doing that just yet haha.

Member Avatar for macgurl70

You can try JQuery UI, they have a dialog box that acts pretty similar to what you seem to be asking about.

http://jqueryui.com/demos/dialog/

The only other way would be to have a hidden div and once they click on the image, it would change the visibility of the div.

Here is an example of using the id to change the visibility of a div.

Hope this helps.

Member Avatar for RoyalElite96

Try to use JavaScript:

<script type="text/javascript">
<!--
function visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

<a href="#" onclick="visibility('form')></a>
Click here to show / hide form.</a>
<div id="form" style="z-index: 1">This is the form.</div>
Member Avatar for rosy12

Hi
A conclusion has to be ready-made as to what to burning up in forte of those 3 controls. Do we burning up Drop DownLists or do we burning up Text boxes beside a few category of pop up fanlight to compress the background in the Text box.
Thanks
best web designing company india

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.