1

使用 jquery-tools 在文档中打开模态窗口，我真的很想知道任何人的澄清；

查询：

  $(function() {

    $(".modalInput").overlay({

        mask: {
          color: 'silver',
          loadSpeed: 200,
          opacity: 0.5
        },

        closeOnClick: true
    });

  });

HTML：

<div rel="#prompt" class="modalInput">show modal</div>

<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>

  <p>
    Test modal dialog.
  </p>

</div>

这一切都很好，但我想知道如何使用 jquery 操作操作。我已经阅读了http://www.w3schools.com/TAGS/att_a_rel.asp，我只是不了解在 jquery 函数中处理标签的 rel/class 之间的关系。IE，如何使用 jquery 将打开模式的操作附加到单击处理程序：

HTML：

<div id="promptID" class="modalInput">show modal</div>

<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>

  <p>
    Test modal dialog.
  </p>

</div>

查询：

$("#promptID").click(function() {
    $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
          color: 'silver',
          loadSpeed: 200,
          opacity: 0.5
        },

        closeOnClick: true
    });
});
4

1 回答 1

1

你真的很亲近。

我们不会在 click 函数中构建实际的叠加层，而是在 click 之外构建它，并在单击按钮时调用 load 事件。

$(".modal").overlay({

    mask: {
      color: 'silver',
      loadSpeed: 200,
      opacity: 0.5
    },

    closeOnClick: true,
    load: false // will not load immediately, must be fired manually to see.
});

我们可以使用attribute selectorjQuery 提供的来定位具有rel匹配属性的元素#prompt。

在下面，我们将调用叠加层的实例，并应用该load()方法，这会将模态框带到最前面并使其可见

$('[rel=#prompt]').click(function(){
    $('.modal').overlay().load()
});

这是 jQuery Tools 提供的关于如何以编程方式触发模式对话框的加载事件的独立演示。

于 2013-05-22T21:44:32.787 回答