How can I prevent the html loaded within my bootstrap modal from affecting my page html?

Question

I am loading a full html email (with opening and closing html tags) into my modal for previewing purposes. Like this:

//Update modal body
$('.modal-body').html(response['html']);

The issue I'm having is that when I do this, the html loaded seemed to (unsurprisingly) change the main page content outside of the modal.

What I'm wondering is whether there is a way to isolate the html to just the modal area so that it doesn't affect the main page's html.

I've looked into using an iframe for this as an alternative, but the problem for me is that I am loading in this data via ajax (along with other data) and iframe's only seem to support pulling in information via links on the fly.

I would appreciate any potential solutions here.

Thanks!

possible duplicate of : http://stackoverflow.com/questions/16504816/how-to-set-html-content-into-an-iframe and/or http://stackoverflow.com/questions/8226307/set-iframe-innerhtml-without-loading-page-in-it-with-jquery — JonSG, Aug 11 '16 at 23:41
These solutions do not work on my end. The iframe does not seem to load in the necessary html. — Tapha, Aug 11 '16 at 23:53

JonSG · Answer 1 · 2016-08-12T00:30:43.787

These might not function here due to whatever sandboxing that is in place but, this works for me locally.

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

<iframe id="target"></iframe>

As does:

var target = document.getElementById('target');
target.src = "javascript:'<html><body>Hello world</body></html>'";

<iframe id="target"></iframe>

Though I recognize the second example could be awkward to manage quote wise.

Here is a full working bootstrap example. Well it works locally, but again, not in this sandbox.

var target = document.getElementById('target');
var targetDoc = target.contentWindow.document;

targetDoc.open('text/htmlreplace');
targetDoc.write("<html><body>Hello world</body></html>");
targetDoc.close();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">


        <iframe id="target"></iframe>


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Though it fails in the sandbox it render like this locally...

The issue is here (I just tested this) that the main html is still being changed when the data html is loaded. — Tapha, Aug 12 '16 at 00:15
Your modal body should be just the static **iframe** at this point right? You are no longer updating the modal body, but rather setting the static iframe inside the body. — JonSG, Aug 12 '16 at 00:24

score 0 · Answer 2 · answered Aug 12 '16 at 00:10

0

Tapha:

Instead of Jquery, you can try the following code:

<div> 
    <object type="text/html" data="http://www.google.com/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>

Hope this helps!

answered Aug 12 '16 at 00:10

Joel Hernandez

2,195
1
13
17

How can I prevent the html loaded within my bootstrap modal from affecting my page html?

2 Answers2