javascript - 像 gmail 聊天一样弹出和弹出

标签 javascript jquery html

我想像 gmail 聊天弹出窗口一样弹出,也想像 gmail 那样弹出。

弹出完成后,特定的 div 应该在新窗口中打开,一旦弹出完成,特定的 div 应该放置在它已经存在的位置,到目前为止我能够弹出使用以下代码在新窗口中打开窗口,但我不知道如何弹出

请注意:弹出完成后,特定的 div 应该在另一个窗口中打开,并且主窗口中的变量也应该可以在弹出窗口中访问。

Jsfiddle 锻炼 弹出演示

  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    //<![CDATA[ 
    $(function(){
    $('.popup').click(function (event) {
     event.preventDefault();
     window.open($(this).attr("href"), "popupWindow",              
     "width=600,height=600,scrollbars=yes");
    });
   });//]]>  

</script>


</head>
<body>
  <a href="http://google.com" class="popup">google</a>
</body>
</html>

更新

我找到了如何在新窗口中打开 div 的选项,代码如下,现在我可以弹出包含 div 中内容的窗口,现在我需要知道如何访问变量值弹出窗口以及如何将弹出窗口附加回原来的位置

Jsfiddle demo

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>
      Popup demo
    </title>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
    </script>

  </head>
  <body>
    <a href="#" class="popup">
      google
    </a>
    <div id="toNewWindow">
      Testing
      <input type="button" onclick="test()" value="click">
    </div>

    <script type="text/javascript">
      //<![CDATA[ 

      $('.popup').click(function (event) {
        event.preventDefault();
        var w = window.open("","myWin","height=400px,width=600px");
        w.document.write( $("#toNewWindow").html() );

        $('#toNewWindow').detach();
      });

      var a=3;
      function test()
      {
        alert(a);
      }
      //]]>      
    </script>
  </body>
</html>

第二次编辑

现在我找到了访问opener和child之间变量的方法,代码如下

现在我的问题是

如果我在 child.html 中的文本框中输入内容,则在弹出窗口时不会显示 iframe 中的文本框。

开场白

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
    winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
    var s=document.getElementById('page').innerHTML;
    console.log(s);
    //var s=document.getElementById('page');
winObj.document.write(s);
    //win.parent.detach(win);

}
function changeValue()
{
    console.log(winObj.document.getElementById('changer').value);
    winObj.document.getElementById('changer').value='changer';
}
</script>
</head>

<body>
   <div id="page">
        <iframe src="child.html" width="100" height="100"></iframe>
   </div>
   <div id="page1">
    <input type="text" id="text1"/>
    <input type="button" value="popup" onclick="openwindow()"/>
    <input type="button" value="changevalue" onclick="changeValue()"/>
   </div>
</body>
</html>

child

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function openerChange()
    {
            window.opener.document.getElementById('text1').value="Value changed.."
    }
</script>
</head>

<body>
    <input type="text" value="" id="changer" />
    <input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>

最佳答案

我会在您的窗口从名为 eg 扩展的页面上创建一个命名窗口。 “家庭窗口”。 然后使用与您所拥有的类似的方式展开窗口,除了使用 _blank 给它一个特定的名称,如“ExpandedWindow” 例如。

window.open("http://YourLink.TLD","ExpandedWindow","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

然后在弹出的 Retract 窗口中,在点击功能中使用这些。

    window.open(document.URL,"HomeWindow");

    ExpandedWindow.close(); 

关于javascript - 像 gmail 聊天一样弹出和弹出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20834291/

相关文章:

javascript - 是否可以限制用户上传固定尺寸的图片?

javascript - 在node.js中使用fetch时出现403禁止错误

jquery - 使用 CSS 和 jQuery 突出显示当前链接同时排除某些页面

html - 隐藏所有固定位置元素

html - 将 HTML 文档保存到磁盘

php - triconsole 日历不与位于下方的日历重叠

javascript - 如何限制或限制用户仅在服务器端上传图像文件而不是在客户端

javascript - 将类添加和删除到具有相同类的随机 div

javascript - 处理传单 map 中的ajax请求

javascript - 谷歌浏览器扩展 : Use Javascript inside webkit notifications?