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>

APPROACH 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>~~

如果您需要更多帮助，请提供更完整的示例。

希望有帮助。

复制动态代码并将其显示在对话框中

1 个答案: