skip to Main Content

I have a popup icon onclick, it should copy Html content to popup window using jquery/javascript. I tried several things but max ended up creating popup window, as i’m new to this . Any help would be appreciated.
Below is my code. Due to some error the code is not working in snippet. please help

$(document).ready(function () {
            $("#OpenDialog").click(function () {
                var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                var $w = $(w.document.body);
                $w.html("<textarea></textarea>");
            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <a  href="#">Click here to open dialog
      <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
    </a>    

      <br> 
      </br>
    <div class="data_copy">
      <p>html data to copy</p>
      <p>test</p>
      <input type="text" />
      <button type="button">testing </button>
    </div>

3

Answers


  1. try this jquery

    <script type="text/javascript">
    
        $(document).ready(function () {
                $("#OpenDialog").click(function () {
                    var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                    var $w = $(w.document.body);
                    var clone = $('.data_copy').clone();
                    $w.html(clone);
                });
            });
        
        
    </script>
    
    Login or Signup to reply.
  2. The window.open would not work here please try my code in a JSFiddle.

    $(document).ready(function () {
                $("#OpenDialog").click(function () {
                    var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
                    var $w = $(w.document.body);
                    var htmltocopy = $('.data_copy').html();
                    $w.html('<div class="data_copy">' + htmltocopy + '</div>');
                });
            });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <a  href="#">Click here to open dialog
          <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
        </a>    
    
          <br> 
          </br>
        <div class="data_copy">
          <p>html data to copy</p>
          <p>test</p>
          <input type="text" />
          <button type="button">testing </button>
        </div>
    Login or Signup to reply.
  3. You miss the script tag.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <a  href="#">Click here to open dialog
        <svg id="OpenDialog" width="20px" height="20px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M16 2H7.979C6.88 2 6 2.88 6 3.98V12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 10H8V4h8v8zM4 10H2v6c0 1.1.9 2 2 2h6v-2H4v-6z"/></svg>
      </a>    
    
        <br> 
        </br>
      <div class="data_copy">
        <p>html data to copy</p>
        <p>test</p>
        <input type="text" />
        <button type="button">testing </button>
      </div>
    <script>
    $(document).ready(function () {
        $("#OpenDialog").click(function () {
            var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
            var $w = $(w.document.body);
            $w.html("<textarea></textarea>");
        });
    });
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search