1

特定のフォームが送信されたときに、顧客に派手なhtmlポップアップ/フレーム（ウィンドウスタイルではない）を表示しようとしています。それを行うための最良の方法が何であるかわからない！

以下のコードで何かを試しましたが、これには2つの問題があります。まず、ポップアップとして表示されるボックスは、私が望まないWindowsポップアップボックス（ブラウザタイプ）のように見えます。色や画像などを追加できるシンプルな四角いボックスが欲しいだけです。別の問題は、このコード内のリンクが機能していないことです。たとえば。メッセージボックスを閉じた後、リンクの1つでサイトの別のページに移動し、もう1つのリンクを使用してボックスを閉じることができます...または2つのリンクで2つの異なるページに移動できます！！

<form action="do.something" method="post" onsubmit="return action_submitted();">

<script type="text/javascript">

    function action_submitted() {
        HTML = '';
        HTML += '<html><head><title>New Action</title></head>';
        HTML += '<body bgcolor="#f5f5f5" style="margin:0px;">';
        HTML += 'Congrats, your action was successful! <br/>';
        HTML += '<a href="close">Close Message</a><br/>';
        HTML += '<a href="/gothere.do">There</a><br/>';
        HTML += '<script>onload=function(){setTimeout("self.close()",5000);}<'+'/script>';
        HTML += '</body></html>';
        var w = 500;
        var h = 200;
        var l = (screen.availWidth - w) / 2;
        var t = (screen.availHeight - h) / 2;
        actionwin = open('javascript:opener.HTML','actionwin','left='+l+',top='+t+',width='+w+',height='+h+',status=0');

        if (actionwin && !actionwin.closed) actionwin.focus();
                    return true;
                }

</script>

助けてください ：）

どうもありがとう！

4

2 に答える 2

1

jqueryモーダルダイアログを使用してみてください：

 var modal = "<div id='modal_pop'>" +
            "<div><center ><img id='imgLogo' src='../../Images/abc.PNG' alt='Value Interface'/></center></div>" +
            "<p>This is a fancy modal pop up.</p>" +
            "</div>";

モーダルダイアログを呼び出す

$(modal).dialog({
            modal: true,
            width: 400,
            height: opts.windowHeight,
            closeOnEscape: false,
            draggable: false,
            resizable: false,
            zIndex: 99999,
            bgiframe: true,
            title: Sample!',
            buttons: {
                "OK": function () {
                // your action on OK clikc  
                $(this).dialog('close');
                                      },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        });

詳細については、このサイトを参照してください。

于 2012-04-19T06:42:28.370 に答える
0

本文の下部に HTML で popup div を作成する必要があることをお勧めします。デフォルトでポップアップを非表示にし、CSS で開きたいときに、JavaScript で表示できるようにし、動的コンテンツがある場合は表示したいコンテンツを渡します。

HTML

<div id="popupWrapper">
    <div id="popup">
        content goes here
    </div>
</div>

CSS

#popupWrapper { display: none;}

jQuery

$('#button').live('click', function() {
    $('#popup').text('content goes here');
    $('#popupWrapper').fadeIn();
});

あなたの場合、ボタンをクリックするたびにポップアップを作成しているためです。これは良い方法ではありません。

また、そのような単純なものにサードパーティのプラグインを使用するのは良くないため、他のプラグインを使用しないでください。プロジェクトがより複雑で遅くなります。それらは複数のオプションを備えた複数の状況に合わせて設計されているため、それが必要ない場合は、そのプラグインを使用する価値があります.

于 2012-04-19T07:36:05.167 に答える