Question

基本上我正在尝试使用一个插件来打开一个网页作为叠加层，而不是让你离开你当前的页面。我无法使演示正常工作。它在这里得到证明：

http://jquerytools.github.io/demos/overlay/external.html

在这里有一个工作演示：

http://jquerytools.github.io/demos/overlay/external.htm

我可以将其完美地用于我托管的其他页面（相对路径），但我希望打开叠加层，例如www.google.com - 当我尝试这个时，叠加层只是空白。我不知所措！

<!DOCTYPE html>
<html>
<!--
   This is a jQuery Tools standalone demo. Feel free to copy/paste.
   http://flowplayer.org/tools/demos/

   Do *not* reference CSS files and images from flowplayer.org when in
   production Enjoy!
-->
<head>
  <title>jQuery Tools standalone demo</title>

    <!-- include the Tools -->
  <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

  <!-- standalone page styling (can be removed) -->
  <link rel="shortcut icon" href="/media/img/favicon.ico">
  <link rel="stylesheet" type="text/css"
        href="/media/css/standalone.css"/>

  <link rel="stylesheet" type="text/css"
      href="/media/css/overlay-apple.css"/>
<style>
    /* use a semi-transparent image for the overlay */
  #overlay {
    background-image:url(/media/img/overlay/transparent.png);
    color:#efefef;
    height:450px;
  }
  /* container for external content. uses vertical scrollbar, if needed */
  div.contentWrap {
    height:441px;
    overflow-y:auto;
  }
  </style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
  <!-- remember that you can use any element inside the trigger -->
  <button type="button">Show external page in overlay</button>
</a>

<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
  <button type="button">Show another page</button>
</a>

<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
  <!-- the external content is loaded inside this tag -->
  <div class="contentWrap"></div>
</div>

<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {

    // if the function argument is given to overlay,
    // it is assumed to be the onBeforeLoad event listener
    $("a[rel]").overlay({

        mask: 'darkred',
        effect: 'apple',

        onBeforeLoad: function() {

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");

            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }

    });
});
</script>
</body>
</html>

JQuery Overlay不加载外部网页

0 个答案: