1

jquery fancyboxのような弾性効果のある div をポップアップする必要があります。以下のコーディングを使用していますが、機能しません...

HTML:

<a href="#" id="LoginAnchorLink">ClickME</a>
<div id="dialog" class="Popup" style="display:none;">
    content of the div have to be popup
</div>

CSS:

.Popup {
    position: fixed;
    background-color: #ffffff;
    width: 100px; 
    height:100px;
}

jQuery:

jQuery(document).ready(function () {
    $("#LoginAnchorLink").click(function () {
        $("#dialog").fancybox();
    });
});

何か不足していますか、それとも何か問題がありますか?

4

2 に答える 2

2

読み直した後、投稿を編集することにしました。これはもっと明確にする必要があります。

fancybox 用の css と javascript ファイルを添付することを忘れないでください。

ログインフォーム

<div style="display: none;">
    <div id="logindiv" style="width:400px;height:100px;overflow: hidden;">
        You div with login data and input fields
    </div>
</div>

ログインリンク

<a id="loginbutton" href="#logindiv" title="enter your login details here">Login Here</a>

jQuery

<script type="text/javascript">
    $(document).ready(function() {
        $("#loginbutton").fancybox({
            'titleShow'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
        });
    });
</script>
于 2012-04-17T11:50:06.027 に答える
-1

HTML は dis のように変更する必要があります

<a href="#" id="LoginAnchorLink">ClickME</a>
<div style="display:none;">
<div id="dialog" class="Popup">
    content of the div have to be popup
</div>
</div>

jqueryライブラリとfancybox jsファイルのパスを確認してください

于 2012-04-17T12:11:36.937 に答える