1

私はHTMLとに非常JavaScriptに慣れていないので、ポップアップのようなポップアップの可能性があるのだろうalert()か? 私が理解したと思うように、 、 、および に 3 つの事前定義されたポップアップJavaScriptがalert()ありconfirm()ますprompt()。しかし、コードを含むカスタムポップアップを作成したいのですがHTML、これにアプローチする方法がわかりません。

ポップアップの外観をオーバーライドする方法JavaScript自体はありますか、またはこれを実現するために特定のパッケージをインポートする必要がありますか?

4

8 に答える 8

1

輸入。

これの本当に良い例は、Twitter Bootstrap のモーダル コントロール (http://twitter.github.com/bootstrap/javascript.html#modals) です。

于 2012-11-12T20:21:46.917 に答える
1

アラートにカスタム HTML を配置することはできません。

jQuery UI ダイアログを使用してカスタム ダイアログを作成することをお勧めします。それらはポップアップウィンドウではなく、ガラスペインでページの上部に表示されます

于 2012-11-12T20:21:57.460 に答える
1

AjaxControlToolkit から jQuery など、ポップアップを含む多くの JS ライブラリがあります。

シンプルに保ちたい場合は、DIV を使用して自分で作成できます。ポップアップを表す絶対位置の DIV を作成し、JavaScript を使用してそれを表示および非表示にすることができます。たとえば、DISPLAY または VISIBLE プロパティを設定します。

于 2012-11-12T20:26:18.783 に答える
1

必ずしもポップアップウィンドウではなく、ライトボックスが必要なようです。jquery を使用している場合は、多くの無料の jquery ライトボックス プラグインが利用可能です。

ここにたくさんの例があります。私は個人的に jQuery ライトボックス プラグインが好きです。

于 2012-11-12T20:22:43.683 に答える
1

ブラウザが提供するダイアログのルック アンド フィールを変更することはできません。これは、質問で言及した機能を通じてアクセスできます。

ダイアログの動作を模倣するものを Javascript で作成する必要があります。ダイアログを簡単に作成できるライブラリを使用するよりも、ゼロから始めるのではなく、ライブラリを使用することをお勧めします。良い例はhttp://jqueryui.com/dialog/です。

于 2012-11-12T20:23:44.220 に答える
1

はい。モーダル ウィンドウまたはダイアログ ウィンドウと呼ばれることが多い、さまざまな「ポップアップ」を使用できます。

jQuery UI や Twitter Bootstrap などのライブラリを使用して、HTML でカスタム アラートを作成できます。他にも利用可能なものがありますが、これらがより一般的であることをお勧めします。

jQuery UI

http://jqueryui.com/dialog/

Twitter ブートストラップ

http://twitter.github.com/bootstrap/javascript.html#modals

開始するための jQuery UI ページからのモーダルの例:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Modal confirmation</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
    </script>
</head>
<body>

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>


</body>
</html>
于 2012-11-12T20:24:04.530 に答える
1

私は個人的にこれに Colorbox を使用します。Colorbox は非常に用途が広く、アラートやその他のものを表示するために使用できます。

http://www.jacklmoore.com/colorbox

于 2012-11-12T20:25:02.437 に答える