迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

jQuery 对话框

作者:迹忆客 最近更新:2023/03/13 浏览次数:

在今天的文章中,我们将了解 dialog 及其在 jQuery 中的各种选项。

jQuery 中的对话框

基本对话框是放置​​在视口内的叠加层,并屏蔽了通过 iframe 显示的页面内容(例如,选择项目)。它有一个标题栏和内容区域,默认情况下可以使用 x 图标移动、调整大小和关闭。

如果内容长度超过最大高度,则会自动出现滚动条。

我们可以添加诸如底部按钮栏和半透明模态覆盖层之类的选项。下面是一些可以与 dialog 一起使用的选项。

你可以在 dialog 的文档中找到更多信息。

让我们通过以下示例来理解它。

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

上面两行需要在实现 dialog 之前导入。它是一个提供对话功能的第三方库。

如果它没有被导入,它会抛出一个错误 dialog is not a function

<button id="jiyi">Open Dialog</button>
<div id="jiyik" title="Welcome to 迹忆客">
  Welcome to 迹忆客
</div>
$(function () {
  $("#jiyik").dialog({
    autoOpen: false,
  });
  $("#jiyi").click(function () {
    $("#jiyik").dialog("open");
  });
});

在上面的示例中,我们定义了将打开对话框的按钮。默认情况下,将关闭一个对话框。

单击按钮后,对话框将触发 open 方法,在屏幕上可见。

尝试在任何支持 jQuery 的浏览器中运行上述代码片段。

 

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便