Question

我想了解leanModal是如何运作的，但我似乎无法弄明白。我按照他们网站上的设置进行了操作：http://leanmodal.finelysliced.com.au/?#。但是，我不明白第3步该怎么做。

我在我的html文件中设置了这个功能：

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

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

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

Answer 1

This is a sample pen demo for you. 你的HTML应该是这样的：

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

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

你应该是这样的：

#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应该是这样的：我假设您已经在文档中引用了leanmodal脚本，并且您没有在浏览器控制台中收到任何错误。

<script type="text/javascript">
  $("#go").leanModal();
</script>

Answer 2

尝试使用$（document）.ready（），如：

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

Answer 3

您可以在绝对类型库https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/jquery.leanModal

中的项目中包含jquery.leanModal.d.ts

然后您的Typescript编译器将有引用的东西。

在CMD行类型＆＃34; typings中安装jquery.leanmodal -ambient＆＃34;安装。

无法让leanModal工作

3 个答案: