Modal Results

These steps describes the process to open a Modal window to display search results instead of the default Pop-up window. The Modal window shows and remains on your webpage even if you go to another webpage.

1. Follow steps 1 to 5 here. Or you can go further and personalize. For this illustration we would use a personalized widget. Note, the instructions here are also applicable to the default widget.

2. Paste the code below into the <style> tag.

This designs the Modal window

/* The Modal (background) */.modal {   
display: none;/* Hidden by default */   
position: fixed;/* Stay in place */   
z-index:1;/* Sit on top */   
padding-top:100px;/* Location of the box */   
left:0;   
top:0;   
width:100%;/* Full width */   
height:100%;/* Full height */   
overflow: auto;/* Enable scroll if needed */   
background-color:rgb(0,0,0);/* Fallback color */   
background-color:rgba(0,0,0,0.4);/* Black w/ opacity */
}
/* The iframe */ 
iframe {   
width:1423px;   
height:1649px;-webkit-transform:scale(0.5);
-moz-transform:scale(1);
-o-transform:scale(1);   
transform:scale(1);   
position: relative;   
border-radius:15px;   
display: inline-block;   
overflow:hidden;   
background-color: #fefefe;
}
/* The iframe class*/
.diva {   
position: absolute;   
width:65%;   
height:80%;
}
/* Modal Content */
.modal-content {   
margin: auto;   
padding:20px;   
width:80%;    
height:60%;
}
/* The Close Button */
.close {   
color: #aaaaaa;   
float: right;   
font-size:28px;   
font-weight: bold;
}
.close:hover,
.close:focus {   
color: #000;   
text-decoration: none;   
cursor: pointer;
}

3.Add this before the end of the </body> tag

This inserts the Modal window below the search widget

<!-- The Modal -->
<div id="myModal" class="modal">
<iframe src="" id="frame" scrolling="no"></iframe>
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p></p>
  </div>

4. Add this before the end of your </script> tag inside the goto function

The logic for the search display

if(window.token!==""){
var modal = document.getElementById("myModal");
document.getElementById("frame").src="https://chidiejike.wixsite.com/trackimize/embedded-security-search-personal?token="+window.token+"&param="+window.searr+"&parame="+window.companyName,"_blank"
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

  modal.style.display = "block";

span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
}
else if(window.token===""){
var modal = document.getElementById("myModal");
document.getElementById("frame").src ="https://trackimize.com/embedded-security-search?token="+window.token+"&param="+window.searr+"&parame="+window.companyName
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

  modal.style.display = "block";

span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
}

5.Delete this code inside the <script></script> tag or comment it out

/*if(window.token!==""){
        window.open("https://trackimize.com/embedded-security-search-personal?token="+window.token+"&param="+window.searr+"&parame="+window.companyName,"_blank","height=500px, width=805px, top=140px, left=275px")}
    else if(window.token===""){
    window.open("https://trackimize.com/embedded-security-search?search="+window.searr,"_blank","height=500px, width=805px, top=140px, left=275px")}*/

6. Add the id "myBtn" to the button element with class "button"

To identifiy the search button in the code

<button class="button" id="myBtn" style="vertical-align:middle" type=click onclick="goto()"><span>Security Search</span></button>

7. Insert this code just below the <script> tag

To ensure the default state of the Modal window is hidden

document.getElementById("myModal").style.display="none"

8. You are done

Expected result

9. Save and test your page!! 🤗