Dialog

                
                    
                
                
                    
<button type="button" class="btn_neues_video stg-header_buttons stg-btn_orange stg-cp">
    <div class="stg-flex_align_start">
        <img src="./images/icon_plus_black.png" class="stg-pr_5">
        Neues Video
    </div>
</button>
                
            

                
                    
                
                
                    

.stg-header_buttons {
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 30px;
  padding: 20px 28px;
}

.stg-btn_orange {
  border: 2px solid var(--orange);
  background-color: var(--orange);
  color: var(--grau_1);
}

/* Hover-Zustand */
.stg-btn_orange:hover {
  border-color: #d98800;
}

/* Aktiver (Klick-)Zustand */
.stg-btn_orange:active {
  background-color: #d98800;
  border-color: #d98800;
}

.stg-cp {
  cursor: pointer;
}

.stg-flex_align_start {
  display: flex;
  align-items: start;
}

.stg-pr_5 {
  padding-right: 5px;
}
                
            

                
                    
                
                
                    
<article id="dialog_neues_video" class="stg-dialog-container" style="display:none">
    <section class="stg-dialog">
        <span onclick="dialog_schliessen('dialog_neues_video')" class="stg-float_right stg-cp">
            <img src="./images/icon_close_black.png" alt="Icon Schließen Dialog">
        </span>

        <div class="stg-dialog-wrapper">
            <div class="stg-con_header">
                <h3>Neues Video hochladen</h3>
            </div>

            <div class="stg-dialog_inhalt">
                <p class="stg-fliesstext_dialog">URL</p>
                <input id="video_url_anlegen" name="video_url_anlegen" placeholder="Link" class="stg-input_element">
                <p class="stg-fliesstext_14">
                    <span class="stg-fliesstext_dialog_auszeichnung">Hinweis:</span> Der Videolink muss zudem gültig sein<br>
                    <span class="stg-fliesstext_dialog_auszeichnung">Link-Format:</span> https://<span class="stg-fliesstext_dialog_auszeichnung">player.</span>vimeo.com/<span class="stg-fliesstext_dialog_auszeichnung">video</span>/Video_ID
                </p>
            </div>    

            <footer class="stg-dialog_btn_gruppe">
                <p class="stg-abbrechen">Abbrechen</p>
                <button type="button" class="stg-button stg-btn_orange stg-cp"><b>Weiter</b></button> 
            </footer>
        </div>
    </section>
</article>
                
            

                
                    
                
                
                    

.stg-dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.stg-dialog {
  background-color: var(--weiss);
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 30px 10px;
  width: 550px;
  position: relative;
}

.stg-dialog-wrapper {
  padding: 20px 30px;
}

.stg-dialog_inhalt {
  padding: 5px 0 10px 0;
}

.stg-dialog_btn_gruppe {
  display: flex;
  gap: 30px;
  float: right;
}

.stg-float_right {
  float: right;
}

.stg-cp {
  cursor: pointer;
}

.stg-con_header {
  margin: 0;
  border-bottom: 1px solid var(--grau_3);
  padding-bottom: 10px;
  padding-top: 0;
}

.stg-fliesstext_dialog {
  font-size: 14px;
  font-weight: 400;
  color: var(--grau_5);
}

.stg-fliesstext_dialog_auszeichnung {
  font-weight: bold;
  color: var(--hinweis-grau);
}

.stg-input_element {
  background-color: var(--slider-grau);
  color: var(--schwarz);
  border: none;
  border-radius: 10px;
  padding: 8px 15px;
  width: 100%;
  box-sizing: border-box;
}

.stg-fliesstext_14 {
  font-weight: 400;
  font-size: 14px;
}

.stg-abbrechen {
  font-size: 14px;
  font-weight: 700;
  color: var(--schwarz);
  cursor: pointer;
}

.stg-button {
  border-radius: 18px;
  padding: 10px 15px;
  background-color: var(--weiss);
}

.stg-btn_orange {
  border: 2px solid var(--orange);
  background-color: var(--orange);
  color: var(--grau_1);
}

/* Hover-Zustand */
.stg-btn_orange:hover {
  border-color: #d98800;
}

/* Aktiver (Klick-)Zustand */
.stg-btn_orange:active {
  background-color: #d98800;
  border-color: #d98800;
}
                
            

                
                    
                
                
                    
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.querySelector('.btn_neues_video');
    var dlg = document.getElementById('dialog_neues_video');
    if(btn && dlg) {
        var closeBtns = dlg.querySelectorAll('[onclick*="dialog_schliessen"]');

        btn.addEventListener('click', function() {
            dlg.classList.add('active');
            dlg.style.display = 'flex';
        });

        closeBtns.forEach(function(c) {
            c.addEventListener('click', function(){
                dlg.classList.remove('active');
                dlg.style.display = 'none';
            });
        });

        //Klick ausserhalb schliesst Diaologfenster auch
        dlg.addEventListener('click', function(e){
            if(e.target === dlg) {
                dlg.classList.remove('active');
                dlg.style.display = 'none';
            }
        });
    }  
});

function dialog_schliessen(dialogId) {
    document.getElementById(dialogId).style.display = 'none';
}