Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://rawgit.com/n33/jquery.poptrox/master/jquery.poptrox.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
  

<div id="gallery"> 

  <section>
    <!-- IFRAME: Link straight to whatever page you want to open --><a href="custom.html" data-poptrox="iframe,600x400"><img src="http://placehold.it/100/07f/fff.png&amp;text=iframe" alt="" title="An IFRAME"/></a>
    <!-- AJAX: Link to whatever content you want to pull in (must be on the same domain)  --><a href="custom.html" data-poptrox="ajax,600x400"><img src="http://placehold.it/100/07f/fff.png&amp;text=ajax" alt="" title="AJAX content"/></a>
   
  </section>
</div>

  </body>

</html>

// Code goes here
$(function() {
  $('#gallery').poptrox({
    usePopupCaption: true,
    usePopupNav: true,
    popupPadding: 0
  });
});

.customstyle {
  background: #cacaca;
}

/* Styles go here */
html, body {
  background: #333;
  color: #fff;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: Open Sans;
}

h1, h2 {
  font-weight: 200;
  padding: 0;
  color: #fff;
}

h1 {
  font-size: 40px;
  margin: 10px;
}

h2 {
  font-size: 18px;
  text-align: center;
  margin: 10px 0;
}

a {
  color: #ccc;
  font-size: 11px;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
  text-decoration: none;
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}
a:hover {
  opacity: .7;
}

section:first-child {
  margin-top: 15px;
}

.devmount {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 20px;
  line-height: 20px;
  text-decoration: none;
  font: 17px Arial;
  color: #fff;
  padding: 10px 40px 10px 0;
  margin-right: 10px;
  background: url(http://media.devmount.de/devmount_small_light.png) right center no-repeat;
  -webkit-transition: background-position .3s, color .3s;
  transition: background-position .3s, color .3s;
}
.devmount span {
  position: absolute;
  right: 3px;
  color: transparent;
  -webkit-transition: inherit;
  transition: inherit;
}
.devmount:hover {
  opacity: 1;
  background-position: left center;
  color: transparent;
}
.devmount:hover span {
  color: #fff;
}

<div class="customstyle">
  You notice my style is lost when I am opened with the iframe option. Because I am requested to be executed in a "new thread". But I am "part" of your initial HTML file if you open me using asyncronous (AJAX)
</div>
<img src="http://seeklogo.com/images/R/ROCK-logo-D0BA9F5980-seeklogo.com.gif" alt="">
<br>
<a href="www.google.com">Link to somewhere</a>
<br>
<button>Button</button>
<br>