使用’x’显示modal dialog而不使用jqueryui
在不使用jquery UI的情况下寻找modal dialog的非常简单的实现。
仅举例来说
title xx
当用户点击按钮时我想显示对话框并在用户预设’xx’时关闭。 我看到了一些例子，但它有很多额外的东西。 我正在寻找像点击按钮显示对话框一样的东西，它会留在那里，直到用户点击’x’没有jqueryui。
任何简单的例子都会很棒。
我想你正在寻找这样的东西：
$('.modal .titlebar a').click(function() { $(this).parents('.modal').hide(); }); $('button.open-modal').click(function() { $('#something').show(); });
这是一个非常基本的版本：
$("
实例
这个怎么运作：
- 我们创建一个iframe作为页面正文的垫片。 这会消除我们稍后添加的“对话框”div之外的任何点击，还会处理操作系统渲染控件和闪存动画弹出顶部的问题。 我们还将其
#f0f0f0半透明（在这种情况下，背景颜色为#f0f0f0，不透明度为50％），因此它“灰化”基础文档。 这绝对定位在0,0，宽度和高度为100％，z-index为100（这必须高于页面上的任何其他内容）。 iframe的src应该是一个空白文档。 - 然后，我们为“对话框”创建一个div，该对话框也是绝对定位的，其z-index高于iframe垫片。
现在，有很多变化。 例如，没有理由你不能在HTML文档中而不是在脚本中使用模型div标记 – 只要在需要它之前给它display: none 。 像这样的东西。
显然，这个版本允许你点击对话框上的任何地方来关闭它，但它很容易被修改为只允许在某个地方用[X]关闭。 并说它可以使用一些造型将…温和地说。
所有这一切，我不能声称它是远程防弹的。 这就是经过充分测试的插件的原因。 🙂