2

私は Web アプリケーションを持っており、いくつかの情報を含む確認メッセージとして jquery ライトボックスを表示する必要があります。

いくつかの調査の後、fancybox FancyBox Jquery Light boxが見つかりました

によってトリガーされる派​​手なボックスに必要な確認メッセージを表示できるようになるまで、この手順を段階的に実行しました<a href="#popup" class="fancybox">Open</a>

asp:button の背後にあるコードから派手なボックスをトリガーまたは表示する必要があります

たくさん検索しましたが、適用したときに得たすべての結果が機能しませんでした。

C＃のaspボタンのコードビハインドからfancyboxをトリガーするサンプルを見せて、ここに添付してください。

それは私のコードのサンプルです:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery   /1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/source/jquery.fancybox.pack.js?v=2.1.0"></script>

<script type="text/javascript">
$(".fancybox").fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    afterLoad: function () {
        this.content = this.content.html();
    }
});
</script>


<body>
<form id="form1" runat="server">
    <a href="#test" class="fancybox">Open</a>

    <div id="test" style="display:none;width:300px;">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <input id="Hello" type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button1" type="button" value="Press Here" />            
            </td>
        </tr>
    </table>
    </div>
</form>
</body>

このコードは正しく機能し、リンクを開くをクリックした後にファンシーボックスを表示する必要があるのは、asp:button をクリックした後にファンシーボックスを表示することだけです。

前もって感謝します

4

3 に答える 3

1

コード ビハインドから JavaScript を呼び出すには、ボタン クリック イベント ハンドラで次のようにします。

ClientScript.RegisterStartupScript(this.GetType(), "fancyBoxScript", "[JAVASCRIPT TO INVOKE FANCYBOX]", true);

この JavaScript はページに送信され、ポストバックが終了した後に実行されます。

編集: JavaScript を使用して FancyBox を呼び出す方法の詳細については、こちらを参照してください。基本的に、非表示のボタンのクリックをシミュレートする必要があります: http://thingsilearned.com/2010/01/27/dynamically-calling-fancybox-from-javascript/

于 2012-09-29T00:01:00.723 に答える
0

html私の理解が正しければ、次のようなボタンから fancybox を起動します。

<button id="newOpen" type="button">open fancybox from button</button>

....ここで重要なのは、または他のプログラミング言語htmlを介してレンダリングされたボタンです。また、これはフォームの一部ではないaspことに注意してください(fancybox で開きます)。button

上記が正しければ、openリンクから fancybox を起動するコードが既にあるので、次の jQuery コードを追加するだけです。

$("#newOpen").bind("click", function(){
 $(".fancybox").trigger("click");
});
于 2012-09-29T18:52:18.157 に答える
0

次のように < head > に JQuery のスクリプト タグがあることを確認します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

また、 head 内で、スクリプト ファイル自体と、次のようなスタイルシートを参照します (ファイルを web サイトのルート/fancybox/source にコピーしたと仮定します)。

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.0"></script>

次に、 < body > の下部 (まだ body 内) で、fancybox を次のように配線してください。

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>
于 2012-09-28T23:57:20.470 に答える