CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
ToddT
ToddT

Reputation: 3258

Insert iFrame using jQuery with modal like styling

I want to display my iFrame over the top of an HTML page like a modal. I want to have a transparent background so you can see the original page behind the "iFrame/Modal".

Right now everything is good, except for the background of the iFrame, its not transparent even though I specify that it should be.

I've created a Fiddle to show what's going on: Fiddle

Here is my jQuery

if (document.location.pathname === '/account'){
  $(function() {
  $("body").html("<div id='todd' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; box-sizing: border-box;>\n" + 
      "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +
        "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +
          "<iframe onload='this.style.visibility='visible'' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +
        "</div>\n" +
    "</div>");
  });
}

Thanks

Upvotes: 0

Views: 104

Answers (1)

sn3ll
sn3ll

Reputation: 1685

In your script you are replacing the content of the body with the iframe. You should either append it to the body, or you can add another div to put the iframe in.

See the fiddle here

 $(function() {
     $("#iframediv").html("<div id='todd' style='position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 0; box-sizing: border-box;>\n" + 
          "<div style='position: fixed; background-color: rgba(0,0,0,.4); top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box;'></div>\n" +
            "<div style='width: 400px; height: 470px; padding: 0px; background: transparent; margin: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box;'>\n" +
              "<iframe onload='this.style.visibility='visible'' allowtransparency='true' style='visibility: visible; width: 100%; height: 100%; border: 0px; background: transparent;' src='https://test-4658.myshopify.com/apps/proxy/credit'></iframe>\n" +
            "</div>\n" +
        "</div>");
  });
<h1>
Hi
</h1>
<div id="iframediv">
</div>

Upvotes: 1

Related Questions