6

私はleanModalがどのように機能するかを理解しようとしていますが、理解できないようです. ここのサイトからセットアップに従いました: http://leanmodal.finelysliced.com.au/?# . ただし、ステップ3で何をすべきかわかりません。

私は自分のhtmlファイルでこの関数を設定しました:

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

ステップ 3 は、「次のように、モーダル トリガーで関数を呼び出します。トリガー アンカーの href 属性を、ターゲット要素の ID と一致するように設定してください」と述べています。

モーダルトリガーは、クリックしてウィンドウを表示するボタンであると想定しています。2番目の文の意味がわかりません。助けてくれてありがとう！

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 は次のようになっているはずです: 私は、あなたがドキュメントのリーンモーダル スクリプトを頭の中で参照していて、ブラウザーのコンソールにエラーが表示されていないと仮定します。

<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 に答える