如何通过只使用JQUERY（没有其他额外的JS）来获得JQUERY POPUP窗口 [英] How to have a JQUERY POPUP window by using only JQUERY (without other extra JS)

问题描述

我需要知道，我们是否可以只使用JQUERY.js而不使用jquery.fancybox，jquery.lightbox等其他插件来执行jquery Popup ....

专家请提出建议。任何帮助将不胜感激。基本上，我认为你谈论的弹出窗口只是一个绝对定位的

  $（< div style ='z-index ：100; position：absolute; left：100px; top：100px; background-color：#ecc; border：1px solid black'> Hi there< / div>）。appendTo（document.body）; 
  

现场示例

这些插件可能会为您做很多有用的事情，包括：

• 在页面的其余部分，在弹出框后面提供一个填充，以防止其他位置的点击（如果您希望弹出框为模式）。


• 使用适用于垫片的iframe，以便Flash动画和基于OS的表单控件不会显示在弹出窗口的顶部（即使它们应该在z顺序中较低），因为某些浏览器


• 提供关闭弹出框（关闭框，Esc键等）的内置方法 提供自动居中功能

等等，但是如果你有强烈的理由重新发明轮子（有时候 理由），上面应该让你开始。

I need to know, whether we can do jquery Popup only using JQUERY.js without using other plugins like jquery.fancybox , jquery.lightbox....

Experts please suggest. Any help will be appreciated.

解决方案

Basically, the style of popup I think you're talking about is just an absolutely-positioned element with a higher z-index that anything else on the page:

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

Live example

There are lots of useful things that these plug-ins are likely to do for you, though, including:

• Providing a "shim" on the rest of the page, behind the popup, that prevents clicks elsewhere (if you want the popup to be modal).
• Using an iframe for the shim so that Flash animations and OS-based form controls don't show on top of your popup (even though they should be lower in the z order) because of issues with Certain Browsers
• Providing a built-in means of closing the popup (a close box, Esc key, etc.)
• Providing automatic centering

Etc., etc. But if you have a strong reason to re-invent the wheel (and sometimes there is a reason), the above should get you started.

这篇关于如何通过只使用JQUERY（没有其他额外的JS）来获得JQUERY POPUP窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！