HOW TO: Show your Interactive Demo in a Pop-up Panel

This blog explains how to embed your clickable demo, tutorial or simulation created on AppDemoStore.com in a pop-up panel, like in the sample on the right-hand side (click on the image to open the demo). You can easily create such an image from App Screenshot + Device Frame, with one click with our PicApp Tool.

New to AppDemoStore? Click here to learn how to create a click-through demo or tutorial for your mobile app in minutes and for free.

You can easily open your demo in a pop-up by using a bit of Javascript coding, as described below.

1 Insert the following Javascript code into your webpage

var showPopup = function(url) {
 
 // create transparent background 
 var elBackground = document.createElement('div');
 elBackground.setAttribute('style', 'position: fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:1000; cursor:pointer');
 elBackground.onclick = function() { 
  fClose(); 
 };
 document.body.appendChild(elBackground);

 // create iframe to load the demo page
 var elFrame = document.createElement('iframe');
 elFrame.src = url;
 elFrame.setAttribute('style', 'position:relative; top:5%; left:30%; width:40%; height:90%; border:none;');
 elBackground.appendChild(elFrame);
 
 // create elment to close the popup
 var elClose = document.createElement('div');
 elClose.innerHTML = 'X';
 elClose.setAttribute('style', 'position:absolute; top:0; right:0; margin:10px; cursor:pointer');
 elBackground.appendChild(elClose);
 elClose.onclick = fClose;
 
 // function to close the popup
 var fClose = function() {
  document.body.removeChild(elBackground);  
 };

};

2 Use the function created in step 1 as shown below

Add an image or a button to your web page and add the following code to the onclick event (adjust the link below to point to your own demo, by replacing the ID):

onclick="showPopup('http://www.appdemostore.com/embed?id=6473213')"

The demo will open in a pop-up panel, as demonstrated in the above image.