0

I am creating a site seal for my users to put in there websites. Currently I am able to generate simple html/css link that looks like a button, on click it redirects to my landing page.

<a href="http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243">
  <span style="box-shadow: #9AC985 0px 1px 0px 0px inset; 
               border: 1px solid #3B6E22; 
               display: inline-block; 
               cursor: pointer; 
               color: #FFFFFF; 
               font-family: Arial; 
               font-size: 14px; 
               font-weight: bold; 
               padding: 8px 16px; 
               text-decoration: none; 
               background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);">
  MY SITE SEAL
  </span>
</a>

Requirement is, instead of opening the link in same tab or new tab. I want it to popup like a modal and show my landing page in the modal window.

Note: My users may or may not have bootstrap jquery or any other library installed, challenge is generated code cannot depend on these libraries, But for sure we can use java-script and/or css along with HTML.

karmendra
  • 2,206
  • 8
  • 31
  • 49

1 Answers1

1

Well, easy, you could create your own modal window like this... (pure CSS, JS)

var modal = document.getElementById("modal");
modal.onclick = function () {
  modal.style.display = "none";
}
var modalIframe = modal.getElementsByTagName("iframe")[0];
modalIframe.onclick = function () {}
function showModal ( url ) {
  modalIframe.src = url;
  modal.style.display = "block";
}
.linkToModal{
  box-shadow: #9AC985 0px 1px 0px 0px inset; 
  border: 1px solid #3B6E22; 
  display: inline-block; 
  cursor: pointer; 
  color: #FFFFFF; 
  font-family: Arial; 
  font-size: 14px; 
  font-weight: bold; 
  padding: 8px 16px; 
  text-decoration: none; 
  background: linear-gradient(#74AD5A , #68A54B ,#74AD5A);
}
#modal{
  display:none;
  background:rgba(0, 0, 0, 0.5);
  position:absolute;
  top:0;bottom:0;left:0;right:0;
}
#modal iframe{
  position:absolute;
  width: 80%;
  height: 80%;
  top:0;bottom:0;left:0;right:0;margin: auto;
}
<a class="linkToModal" onclick="showModal('http://www.example.com/seal/1e047f70-948c-4d40-a47f-0a15c59fc243')">MY SITE SEAL</a>
<div id="modal"><iframe src=""></iframe></div>
Martin
  • 66
  • 4