-6

I would like to realize a simple tutorial to explain the role of the specific areas of my website realised with popovers. My idea is that when user clicks on the button start tutorial, then some popovers are displayed in sequence on different elements, and when a popover is open, the rest of the screen is blocked and the user can only press next to close the current popover and open the following one, until the tutorial is concluded. How can i do that?

Alessio
  • 81
  • 1
  • 2
  • 9

2 Answers2

0

When the modal is open, you have to use JS to temporarily add overflow:hidden to the body element (this will remove the scroll bars on the main window and prevent scrolling.)

The markup to manage this class toggle on the body has already been answered/provided here:

How to disable scrolling temporarily?

Community
  • 1
  • 1
Korgrue
  • 3,237
  • 1
  • 10
  • 19
  • Ok, but I would like to use popover instead of modal. Is it possible? – Alessio Apr 28 '16 at 19:42
  • Same effect. You can use the same approach for both options. Just add overflow:hidden to the body element via JS the moment your popup opens. Remove overflow:hidden when you close the popup. – Korgrue Apr 29 '16 at 15:37
0

If you just require the user not to be able to click anywhere else, other than in the tutorial, you can make a simple overlay like so (View snippet in full screen):

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>
Dan Schalow
  • 128
  • 11