Question

在不使用jquery UI的情况下寻找一个非常简单的模态对话框实现。

仅举例来说

<div class="modal" id="something" style="display: none;">
   <div class "titlebar">
      <h4>title</hr>
      <a href="#" >xx</a>
   </div>
   <div class=content></div>
  <div class=footer></div>
</div>

当用户点击我要显示对话框的按钮时，当用户按'xx'时关闭。我看到了一些例子，但它有很多额外的东西。我正在寻找像点击按钮显示对话框一样的东西，它一直待在那里，直到用户点击'x'没有jqueryui。

任何简单的例子都会很棒。

Answer 1

这是一个非常基本的版本：

$("<iframe id='shim' src='http://jsbin.com/abira4'>").css({
    width: "100%",
    height: "100%",
    position: "absolute",
    left: "0px",
    top: "0px",
    zIndex: "100",
    backgroundColor: "#fff",
    opacity: "0.5"
}).appendTo(document.body);
$("<div>Hi there, click me to dismiss</div>").css({
    zIndex: "101",
    border: "1px solid black",
    backgroundColor: "#ecc",
    position: "absolute",
    left: "100px",
    top: "100px"
}).appendTo(document.body)
  .click(function() {
    $(this).remove();
    $("#shim").remove();
});

Live example

工作原理：

我们创建一个iframe作为页面正文的垫片。这会消除我们稍后添加的“对话框”div之外的任何点击，还会处理操作系统渲染控件和闪存动画弹出顶部的问题。我们还使其半透明（在这种情况下，背景颜色为#f0f0f0，不透明度为50％），因此它“灰显”基础文档。这绝对定位于0,0，宽度和高度均为100％，z-index为100（这必须高于页面上的任何其他内容）。 iframe的src应为空白文档。
然后我们为“对话框”创建一个div，它也是绝对定位的，其z-index高于iframe垫片。

现在，有一些很多的变体。例如，没有理由你不能在HTML文档中而不是在脚本中使用模型div标记 - 只需在需要之前给它display: none。这样的事情。

显然，这个版本允许你点击对话框上的任何地方来解除它，但它很容易被修改为只允许在某个地方用[X]关闭。并且说它可以使用一些造型将......温和地说。

所有这一切，我不能声称它是远程防弹的。这就是经过充分测试的插件的原因。： - ）

Answer 2

我认为你正在寻找这样的东西：

$('.modal .titlebar a').click(function() {
  $(this).parents('.modal').hide();
});

$('button.open-modal').click(function() {
  $('#something').show();
});

使用'x'显示模态对话框而不使用jqueryui

2 个答案: