diedVIPs

html knowhow

Button Iframe anzeigen









Button Iframe anzeigen

So sieht´s aus




Quellcode
<html>
<head>

<style type="text/css">
.viewer {width: 80%; height: 90vh; display: flex; justify-content: space-between; perspective: 3000px; }
iframe {width: 45%; border-radius: 10px; box-shadow: 0px 0px 15px #2b2b2b30; transition: 0.3s ease-in-out; z-index: 8000; transform: rotateY(20deg);}
iframe:not(:first-child) {margin-left: -10rem;}
iframe:hover {transform: translateY(-1rem); width: 100%; z-index: 9000;}
iframe~iframe {transform: translateX(10rem/2.5);}
.white-mode {text-decoration: none; padding: 7px 10px; background-color: #122; border-radius: 3px; color: #FFF; transition: .35s ease-in-out; position: absolute; left: 15px; bottom: 15px}
.tab-wrap .dot{position: absolute; width:5em; height:30px; border-radius: 10%; left: calc(50% - 20px); bottom: 0; background-color:lime; border: 2px solid yellow; transition: all 0.5s ease;}
.tab-wrap .dot:hover{background: red; }
.tab-wrap .tab {background: white; color: black; padding: 1em; overflow: scroll; height: 100%;}
.tab-wrap .tab.less {padding: 0; }
.tab-wrap .tab h1 {text-align: center; background: fuchsia; margin: 0 0 .5em; padding: .25em;}
.tab-wrap .tab p {margin: .5em 0 ;}
[class^="col-"],[class*="col-"] {float:left; padding-left: .25em; padding-right: .25em;}
</style>
</head>

<body >
<button onclick="toggleIframe('http://htmlknowhow.de/kontakt.html')">Iframe anzeigen</button>
<script>
var toggleIframe = function() {
var isFirstRun = true;
var isOpen = false;
var iframeWrapper = null;
var iframeWrapperCssText = 'width:100%;height:100%;position:fixed;background:rgba(0,0,0,0.5);top:0;left:0;';
var firstRun = function(src) {
iframeWrapper = document.createElement('div');
iframeWrapper.style.cssText = iframeWrapperCssText;
document.body.appendChild(iframeWrapper);
var spinner = document.createElement('img');
spinner.src = 'http://vm.providesupport.com/images/common/loader.gif';
iframeWrapper.appendChild(spinner);
spinner.style.cssText = 'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);';
var iframe = document.createElement('iframe');
iframe.style.cssText = 'width:95%;height:100%;margin:3%;border:none;position:fixed;';
iframe.src = src;
iframeWrapper.appendChild(iframe);
iframeWrapper.addEventListener('click', function(event) {
if (!isOpen) return;
const isOnSettingsPage = iframe.contains(event.target);
if (!isOnSettingsPage){
toggle();
}
});
isFirstRun = false;
isOpen = true;
}
var toggle = function() {
iframeWrapper.style.cssText = iframeWrapperCssText + (isOpen && 'display:none;');
isOpen = !isOpen;
}
return function(src) {
if (isFirstRun) {
firstRun(src);
} else {
toggle();
}
}
}();
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum