title: jQuery: How can i put on each a href link iframe will opened in center of page with center aligment?
body: <p>I found a way to solve this issue about closing iframe element by using jQuery. But it has opened 2 more issues. How can I use a href link opens an iframe object center of page of this way to replace all menu items. And when I close the content in iframe windows all element does recovery in back state?!</p>
  
  <p>I post sample video which to see the theme of site I want iframe to stay in the same page like transparency defined in css as rule. I have some ideas to put on every link on menu iframe with different page conents and at bottom to paste some button for close. I hope someone has ideas to write. I'd be thankful!</p>
  
  <p>Video: <a href="https://youtu.be/ZdaOWqEHHfU" rel="nofollow noreferrer">here!</a></p>
  
  <p>jQuery code:
  </p>
  
  <pre><code>     $('document').ready(function(myFunc){
          'use strict';
          var htmlString;
          var oldState = $('#main-page').clone();
  
          $('iframe').addClass('.decoration');
  
        $('#aboutWin').click( function(e){
              event.preventDefault();
              htmlString = $(this).html('&lt;iframe src="./content/about.html"/&gt;');
              $('#main-page').replacewith(htmlString);
          });
  
          $("#btncls").on('click', function(){
              /*var iframes = document.querySelectorAll('iframe');
              for (var i = 0; i &lt; iframes.length; i++) {
                  iframes[i].parentNode.removeChild(iframes[i]);
              }*/
              $('html').detach();
  
              $('#main-page').append(oldState);
              if($('#btncls').onclick()){
                 return myFunc;
              };
      });
  
  });
  </code></pre>
  
  <p></p>
  
  <p>PageCode here:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id=main-page class="decoration"&gt;
          &lt;div id="cover-gif"&gt;
      &lt;div id="center"&gt;
         &lt;ul class="main-menu"&gt;
             &lt;li&gt;&lt;a id="index.html" class="fontEuroStreet cool-link"&gt;Home&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a id="storiesWin" class="fontEuroStreet cool-link"&gt;Stories&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a id="scriptsWin" class="fontEuroStreet cool-link"&gt;Scripts&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a id="downloadsWin" class="fontEuroStreet cool-link"&gt;Downloads&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a id="aboutWin" class="fontEuroStreet cool-link"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; 
      &lt;/div&gt;
      &lt;div id=short-content&gt;
          &lt;h1 class="head-text fontPolyReg"&gt;Welcome to Polyveil site!&lt;/h1&gt;
          &lt;p class="short-text fontEuroRoad"&gt;Hello! In this site will be sharing mysterious things about universe, new age technologies, using SCM/CLEO scripting in GTA Vice City.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I re-post here code from about.html:</p>
  
  <pre><code>&lt;cc&gt;
  &lt;body style="width: 320px; height: 240px;" class="decoration"&gt;
      &lt;img src="../_main_src/info.png" style="clear both; float: left; margin-left: 24px;" /&gt;
      &lt;h1 class="head-text fontXoloB" style="float: center; padding-top: 16px; padding-left: 86px;"&gt;About&lt;/h1&gt;
      &lt;div class="h-line" style="margin-left: 32px; padding-left: 2px;"&gt;
          &lt;iframe src="../content/about%20mission.txt" class="decoration infoblock fontXoloReg" style="text-align: left; float: left; margin-left: 4px; position: relative; color: mediumaquamarine;"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
      &lt;div class="h-line" style="margin-top: 482px; margin-left: 32px;"&gt;&lt;input id="btncls" type="button" value="Close" class="button cool-link fontXoloB" /&gt;&lt;/div&gt;
  &lt;/cc&gt;
  </code></pre>