Javascript 如何仅使用jQuery(不使用其他插件)创建jQuery弹出窗口

Javascript 如何仅使用jQuery(不使用其他插件)创建jQuery弹出窗口,javascript,jquery,html,Javascript,Jquery,Html,我需要知道,我们是否可以只使用jQuery而不使用Fancybox、Lightbox等其他插件来实现jQuery弹出功能。您可以这样做: var mywin = window.open("", "my_popup", "location=0,status=0,scrollbars=0,width=500,height=500"); var contents = "HTML content..."; $(mywin.document.body).html(contents); 是的,你可以。唯一

我需要知道,我们是否可以只使用jQuery而不使用Fancybox、Lightbox等其他插件来实现jQuery弹出功能。

您可以这样做:

var mywin = window.open("", "my_popup", "location=0,status=0,scrollbars=0,width=500,height=500");
var contents = "HTML content...";
$(mywin.document.body).html(contents);

是的,你可以。唯一的问题是你是否需要重新发明轮子

要打开弹出窗口,只需执行以下步骤

  • 创建一个用作弹出窗口的元素并将其隐藏(定位为绝对位置,z索引更高)
  • 用于在所需位置显示元件的代码
  • 关闭弹出窗口的方法(大多数插件对此有不同的选项;您可以单击关闭按钮或使用Esc键)

  • 如果要禁用背景,则必须创建另一个元素并设置不透明度。如果您希望所有的选择框和iFrame都位于弹出窗口下(对于IE6),那么您必须使用嵌入在覆盖元素中的ifram。

    基本上,我认为您所说的弹出窗口样式只是一个绝对定位的元素,其z索引比页面上的任何其他元素都高:

    $("<div style='z-index: 100; position: absolute; left: 100px; top: 100px; background-color: #ecc; border: 1px solid black'>Hi there</div>").appendTo(document.body);
    
    $(“你好”).appendTo(document.body);
    

    不过,这些插件可能会为您做很多有用的事情,包括:

    • 在弹出窗口后面的页面的其余部分提供一个“垫片”,防止在其他地方单击(如果您希望弹出窗口是模态的)
    • 使用iframe作为垫片,以便Flash动画和基于操作系统的表单控件不会因为某些浏览器的问题而显示在弹出窗口的顶部(即使它们的z顺序应该较低)
    • 提供关闭弹出窗口的内置方式(关闭框、Esc键等)
    • 提供自动定心

    但是如果你有很强的理由重新发明轮子(有时也有理由),那么以上应该可以让你开始了。

    为什么不使用Jquery API呢?

    是jQuery之上的一个额外层,而不是它的一部分。显然OP希望避免使用基本jquery.js以外的任何东西。