скопировать динамический код вместе с отображением в диалоговом окне

Question

В настоящее время у меня есть несколько строк с разными скрытыми кодами книг, когда человек нажимает на кнопку Показать код, он должен отобразить всплывающее диалоговое окно с кодом вместе с открытием соответствующей ссылки в новом окне.

Я пробовал 2 способа, но оба не открывали ссылку или не открывали код. Кнопка показа кода ничего не делает

ПОДХОД 1

function show_code(num,url,bookcode) {
  document.getElementById('revealedcode-' + num).style.display = '';      
  document.getElementById('hiddencode-' + num).style.display = 'none'; 
  $( "#codebox" ).text(bookcode);
window.open(url);
$( "#codebox" ).dialog({
modal: true,width: "500px",Height: "250px",top:"50px",
position: ['center',0], 
});

};

var newWindow = window.open(url);
newWindow.blur();
window.focus();                   
return false;

}

HTML это

    <div class="right-pad clickbtn">
<a id="hiddencode-<?php echo $i; ?>"  href="#" onclick="show_code(<?php echo $i; ?>,'<?php echo $link ;?>','<?php echo $bookcode; ?>');">Show Code </a>

<a id="revealedcode-<?php echo $i; ?>"  style="display:none;" href="<?php echo $link ;?>"><?php echo $bookcode; ?></a>
</div>

       <div id="codebox"></div>

ПОДХОД 2

<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 </style>


<script type="text/javascript">


function show_code(num,url,bookcode) {
      document.getElementById('revealedcode-' + num).style.display = '';      
      document.getElementById('hiddencode-' + num).style.display = 'none'; 

      // Get the modal
        var modal = document.getElementById('btn-' + num);

        // Get the button that opens the modal
        var btn = document.getElementById('btn-' + num);


      $( "#couponbox" ).text(couponcode);

      // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

      // When the user clicks the button, open the modal 
        btn.onclick = function() {
        modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
        modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
          if (event.target == modal) {
            modal.style.display = "none";
          }

    }
});     
       var newWindow = window.open(url);
    newWindow.blur();
    window.focus();                   
    return false;
}
</script>

HTML для этого является

 <div id="modal-<?php echo $i; ?>" class=" codeindex">


    <div>

            <h2><a href="#" onclick="show_code(<?php echo $i; ?>,'<?php echo $extlink ;?>','<?php echo $bookcode; ?>');"><?php echo the_title();?></a></h2> 

    </div>

    <div id="btn-<?php echo $i; ?>" class="right-pad clickbtn">
<a id="hiddencode-<?php echo $i; ?>"  href="#" onclick="show_code(<?php echo $i; ?>,'<?php echo $extlink ;?>','<?php echo $bookcode; ?>');">Show Code </a>

<a id="revealedcode-<?php echo $i; ?>" style="display:none;" href="<?php echo $extlink ;?>"><?php echo $bookcode; ?></a>
</div>

       <div id="codebox"></div> 

    </div>  

Answer 1

Вы можете использовать _BLANK как часть свойств окна для своей цели.Это поможет браузеру открыть новое пустое окно.

Рассмотрим следующий код:

HTML

<div id="btn-<?php echo $i; ?>" class="right-pad clickbtn">
  <a id="hiddencode-<?php echo $i; ?>"  href="#" data-num="<?php echo $i; ?>" data-link="<?php echo $extlink ;?>" data-code="<?php echo $bookcode; ?>">Show Code </a>
  <a id="revealedcode-<?php echo $i; ?>" style="display:none;" href="<?php echo $extlink ;?>"><?php echo $bookcode; ?></a>
</div>

JavaScript

function openWindow(url, trgt, opt) {
  if (opt == undefined) {
    opt = "location=yes,height=480,width=640,scrollbars=yes,status=yes";
  }
  if (trgt == undefined) {
    trgt = "_BLANK";
  }
  return window.open(url, trgt, opt);
}

function show_code(num, url, bookcode) {
  $("#revealedcode-" + num).show();
  $("#hiddencode-" + num).hide();
  $("#codebox").html(bookcode);
  $("#codebox").dialog({
    open: function(e, ui) {
      var newWin = openWindow(url);
      newWin.blur();
      $(window).focus();
    },
    modal: true,
    width: "500px",
    Height: "250px",
    top: "50px",
    position: ['center', 0],
  });
};

$("a[id=^'hiddencode']").on("click", function(e){
  e.preventDefault();
  var n = $(this).data("num"),
    l = $(this).data("link"),
    c = $(this).data("code");
  showCode(n, l, c);
});

Используются атрибуты data для хранения дополнительных данных.Затем мы связываем событие click.Я подозреваю, что они не создаются динамически, поэтому вы можете использовать .click().На всякий случай, я показываю это с .on().

Другое возможное решение будет что-то вроде:

<a id="newWindow" target="_BLANK" style="width:1px;height:1px;overflow:none;">New Window</a>
<script>
function newWindow(url){
  $("#newWindow").attr("href", url).trigger("click");
}
</script>

Если вам нужнобольше помощи, пожалуйста, предоставьте более полный пример.

Надеюсь, что поможет.