Test s Intro.js

by Petr Haluza

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
<p>dokumentace na <a href="https://introjs.com/docs">https://introjs.com/docs</a></p>
<p><a class="btn btn-primary btn-lg" role="button" href="javascript:void(0);" onclick="javascript:introJs().setOptions({hideNext: true, nextLabel: 'Další', prevLabel: 'Zpět', skipLabel: 'Ukončit', doneLabel: 'Hotovo'}).start();">Spustit prohlídku »</a></p>


<div style="display:flex">
<div class="col-md-4" data-step="1" data-intro="Ahoj, to je ale věc!">
  <h2>Prvek 1</h2>
	<p>This is example. For more detail please click the button below...</p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>







<div class="col-md-4">
  <h2>Prvek 2</h2>
	<p>This is example. For more detail please click the button below...</p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>

<div style="width:100px" data-step="2" data-intro="A tohle nepřehlédni" >
  <h2>Prvek 3</h2>
	<p>This is example. For more detail please click the button below...</p>
	<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
</div>

CSS

body{padding:20px}
.btn-primary {padding:5px 10px; background:lightblue; font-size:18px}
.introjs-overlay{position:absolute;box-sizing:content-box;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0, rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0, rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0, rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0, rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0, rgba(0,0,0,0.9) 100%);filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}
.introjs-fixParent{z-index:auto!important;opacity:1.0!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}
.introjs-showElement, tr.introjs-showElement>td, tr.introjs-showElement>th{z-index:9999999!important}
.introjs-disableInteraction{z-index:99999999!important;position:absolute;background-color:white;opacity:0;filter:alpha(opacity=0)}
.introjs-relativePosition, tr.introjs-showElement>td, tr.introjs-showElement>th{position:relative}
.introjs-helperLayer{box-sizing:content-box;position:absolute;z-index:9999998;background-color:#FFF;background-color:rgba(255,255,255,.9);border:1px solid #777;border:1px solid rgba(0,0,0,.5);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s...

JavaScript

/* orig https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js */