6

我试图了解leanModal 的工作原理，但我似乎无法弄清楚。我在他们的网站上进行了设置：http: //leanmodal.finelysliced.com.au/ ?# 。但是，我不明白第 3 步该怎么做。

我已经在我的 html 文件中设置了这个函数：

<script type="text/javascript">
     $('#btnToCreate-Join').click(function() {
          $("#trigger_id").leanModal();
     });
</script>

第 3 步说“调用模态触发器上的函数，如下所示。确保将触发器锚的 href 属性设置为与目标元素的 id 匹配。”

我假设模态触发器是我要单击以调出窗口的按钮。我不确定第二句话是什么意思。谢谢您的帮助！

4

3 回答 3

5

这是为您准备的示例笔演示。 你的 html 应该是这样的：

<a id="go" name="test" href="#test">Basic</a>

<div id="test">
     bla bla bla
</div>

你的CSS应该是这样的：

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

#test {
width: 600px;
padding: 30px;
display: none;
background: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}

您的 javascript 应该是这样的：我假设您已经在 head 的文档中引用了 leanmodal 脚本，并且您在浏览器的控制台中没有收到任何错误。

<script type="text/javascript">
  $("#go").leanModal();
</script>
于 2013-10-16T23:17:54.063 回答
1

尝试使用 $(document).ready() ，例如：

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnToCreate-Join').click(function() {
            $("#trigger_id").leanModal();
        });
    });
</script>
于 2013-11-21T01:03:01.833 回答
0

您可以从绝对类型库https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery.leanModal在您的项目中包含 jquery.leanModal.d.ts

然后你的 Typescript 编译器就会有一些东西可以参考。

在 CMD 行中输入“typings install jquery.leanmodal --ambient”进行安装。

于 2016-03-29T22:58:40.690 回答