Wie man den Bildschirm einfriert, wenn Popover im Browser angezeigt wird?

Question

Ich möchte ein einfaches Tutorial realisieren, um die Rolle der spezifischen Bereiche meiner Website zu erklären, die mit Popovers realisiert wurden. Meine Idee ist, dass, wenn Benutzer auf die Schaltfläche start tutorial klickt, einige Popovers nacheinander auf verschiedenen Elementen angezeigt werden, und wenn ein Popover geöffnet ist, wird der Rest des Bildschirms blockiert und der Benutzer kann nur next drücken, um das aktuelle Popover zu schließen und öffne das folgende, bis das Tutorial abgeschlossen ist. Wie kann ich das tun?

Answer 1

Wenn die modal geöffnet ist, müssen Sie JS verwenden vorübergehend Überlauf hinzuzufügen: hidden auf das Körperelement (dies wird die Bildlaufleisten im Hauptfenster zu entfernen und zu verhindern, Scrollen.)

Das Markup diese verwalten Klasse Knebel auf dem Körper hat bereits hier beantwortet/zur Verfügung gestellt worden:

How to disable scrolling temporarily?

Answer 2

Wenn Sie nur die Benutzer benötigen nicht in der Lage sein, irgendwo anders klicken, die nicht im Tutorial, können Sie eine einfache Overlay machen wie So (Schnipsel im Vollbild anzeigen):

html, 
 
body { 
 
    overflow: hidden 
 
} 
 
.block { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background: black; 
 
    opacity: 0.8; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.tutorial { 
 
    height: 300px; 
 
    width: 800px; 
 
    background: #ccc; 
 
    position: absolute; 
 
    top: 50vh; 
 
    left: 50vw; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 
iframe { 
 
    height: 100vh; 
 
    width: 100vw; 
 
}

<iframe src="http://autotrader.com" frameborder="0" scrolling="no"></iframe> 
 
<div class="block"> 
 

 
</div> 
 

 
<div class="tutorial"> 
 

 
</div>