gpt4 book ai didi

javascript - 使用 JQuery 进行弹出窗口/对话框的最佳方式?

转载 作者:行者123 更新时间:2023-11-30 13:18:50 25 4
gpt4 key购买 nike

我以前做了一些弹出窗口/对话框,现在我在 () 中遇到了回归错误,并且想重新编码以将 JQuery 用于 DIV/弹出窗口/对话框。迁移到 Jquery 将是一个优势,因为我们可以为对话框/弹出窗口启用重新定位和调整大小,如果弹出窗口只是一个将自身置于其他元素之上的 DIV,则我们不能这样做。

现在我想知道用 JQuery 显示弹出窗口/对话框/DIV 的“最佳”方法是什么?我宁愿不添加插件,只包含基本的 JQuery 文件。你能告诉我怎么做吗?

当前页面类似于弹出窗口,但不可重新定位。

最佳答案

我这样做的方法是创建一个 .popup包含弹出窗口基本布局功能的类。然后把这个类加到一个隐藏<div>在页面顶部。

然后当需要弹出窗口时,附加 draggableresizable jQuery 的属性。之后,使用 .get() 加载弹出窗口的内容。从专用于弹出内容的页面请求,然后是 .show()

示例

CSS

.popup 
{
display:none;
position:absolute;
// some other nice styling features
}

HTML

<body>
<div class='popup'></div>
...
page content
...
</body>

Javascript

function popup(){
// for the draggable you may want to specify the drag handle like only the title of the popup
var popup = $('.popup');

popup.draggable();
popup.resizable();

$.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {
popup.html(data);
popup.show('fast');
});
}

来源:

http://jqueryui.com/demos/resizable/

http://jqueryui.com/demos/draggable/

关于javascript - 使用 JQuery 进行弹出窗口/对话框的最佳方式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11047584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com