Question

以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Model</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

});

</script>
<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
div.window{
  border-width:3px;
  border-style:solid;
  border-color:gray;
  }

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;

  display:none;
}

#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;

  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
  padding:10px;
  background-color:#ffffff;
}


#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent; 
  width:375px; 
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}




</style>
</head>
<body>

<ul>
<li><a href="#dialog" name="modal">Simple Window</a></li>
</ul>

<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>

<a href="https://www.facebook.com/login.php"><img src="facebook-24x24.png" width="24" height="24" alt="Facebook" /></a>
</div>

  <div id="mask"></div>
</div>



</body>
</html>

单击一个简单的窗口链接后，将创建一个div元素。在该div元素中有一个Facebook按钮。点击Facebook按钮，它会在新窗口中加载Facebook登录页面。是否可以在该div元素本身或其他任何方式加载Facebook页面？

Answer 1

简单的答案是否定的（除非您使用带有标签的coldfusion），您也可以使用Iframe，但这会让您打开跨站点脚本。你已经开始想知道是否可以通过另一个页面来调用你正在调用的页面的内容，通过ajax调用来访问div。

但我怀疑你是否可以确信该内容的所有css，图像和相关脚本仍会链接。这是一个有趣的问题，但是这个问题的解决方案无疑会比你已经说过的简单性更复杂（在另一个窗口中打开facebook登录信息）。

是否可以在div元素中加载页面？

1 个答案: