JavaScript Popup Venster Openen via Knop (HTML & CSS)

Voorbeeld

Zoek je een eenvoudige manier om een externe link te openen in een net, apart pop-upvenster? Met dit handige JavaScript popup script open je met één klik op een knop een nieuw venster met een vooraf ingestelde breedte en hoogte.

Ideaal voor het tonen van chats, retro-tools of partnerwebsites zonder dat bezoekers jouw huidige pagina direct verlaten.

Dankzij de combinatie van clean JavaScript en aanpasbare CSS-styling, past dit script naadloos binnen elk website-ontwerp. Kopieer hieronder direct de HTML, JS en CSS code!

HTML

<button class="chat-button" onclick="openPopup('https://vzphiphop.nl/', 'VelpZuid')"> VZP website </button> 
<button class="chat-button" onclick="openPopup('https://retrochat.nl', 'RetroChat')"> Open Retro </button> 
<button class="chat-button" onclick="openPopup('https://tooljunkie.nl/', 'Tooljunkie')"> Tooljunkie </button>

Javascript

<script>
  function openPopup(url, windowName) {
    const features = [
      'toolbar=no',
      'location=no', // Let op: Moderne browsers negeren dit en tonen de URL alsnog voor de veiligheid
      'menubar=no',
      'status=no',
      'scrollbars=yes',
      'resizable=no',
      'width=790',
      'height=595',
      'top=120',
      'left=200'
    ].join(',');

    const popup = window.open(url, windowName, features);
    if (!popup) {
      alert('Popup geblokkeerd! Sta pop-ups toe voor deze site.');
    } else {
      popup.focus();
    }
  }
</script>

CSS

<style>
.button,
.chat-button {
width: 125px;
max-width: 100%;
    margin: 0 5px;
    background: #f7f7f7;
    color: #444;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 5px 16px 5px 16px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

.button:hover,
.chat-button:hover {
    background: #2772a982;
    color: #111;
    border-color: #ccc;
    box-shadow: 0 3px 7px rgba(0,0,0,0.10);
    transform: translateY(-1px);
}

.button:active,
.chat-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
</style>

Zoek je geen pop-up achter een knop, maar een melding die direct verschijnt als je pagina opstart?

Bekijk dan ons automatische welkomst-popup script.