Question

使用jquery-tools在文档中打开模态窗口，我真的希望任何知道的人做出一些澄清;

Jquery的：

  $(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>

Jquery的：

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

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

        closeOnClick: true
    });
});

Answer 1

你真的很亲密。

我们只需在点击功能之外构建实际叠加层，而不是在点击功能之外构建实际叠加层，而是在点击按钮时调用加载事件。

$(".modal").overlay({

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

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

我们可以使用jQuery提供的attribute selector来定位rel属性与#prompt匹配的元素。

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

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

Here's the stand alone demo provided by jQuery Tools关于如何以编程方式触发模态对话框的加载事件。

将REL属性操作转换为Jquery操作

1 个答案: