3

alert(), confirm(), prompt()またはを使用せずにJavaScriptでポップアップダイアログを作成する方法があるかどうか疑問に思っていましたwindow.open()

その理由は、ダイアログ内に何でも入れられるようにしたいからです。任意のコンテンツ。(たとえば、テキスト ボックス、div、書式設定されたコンテンツ、または任意のテキストで必要な多くの入力ボタン)、alert(), confirm(),またはのいずれも、prompt()これを行うことを許可しません。prompt()テキストボックスのみを許可します。そしてalert()、confirm()プリセットボタンとプレーンテキストのみを許可します。window.open()別の URL、または同じ機能を持つ同じ URL に再配置されるため、使用したくありません。

もう 1 つのことは、指定されたすべてのオプションがユーザーに警告することです。そのため、関数名alert()とprompt()私は少し邪魔にならないものを求めています。

jQuery プラグインを使用したり、独自のプラグインを作成したりしたくない理由は、ダイアログに OS ネイティブの GUI を持たせたいからです。

今、私はこれが誰かによって使用されているのを見たことがありません.私はウェブサーフィンと参照の十分な経験を持っていると思います. したがって、これが不可能な場合、別の許容できる答えは、alert()orconfirm()または またはカスタマイズ可能なprompt()ボタンを使用することです (キャプション値が何であれ、必要な数だけ)。

編集:この要求の背後にある理由は、私が最近 C++ と Python 2 を含むコンピューター サイエンスのコースを受講しているためです。Python 2 には、システム GUI を呼び出すことでこれを行うことができますが、ブラウザー クライアント側のアーキテクチャの方が快適です。それと私もただ興味があります。

編集 2:思い切った方法で操作できるプラグインを使用したくありません。ハックで何ができるかではなく、システムで何ができるかに興味があります。

4

4 に答える 4

3

あなたが求めていることは JavaScript では可能ですが、クライアント側では不可能です。サーバー側では、 RingoJSとnode.jsで JavaScript を実行しています。

Ringo は、Java パッケージと連携できます。したがって、基本的にSwingを使用して、JavaScript で GUI アプリケーションを作成できます。例えば：

var {FlowLayout} = java.awt;
var {JButton, JFrame, JLabel} = javax.swing;

var frame = new JFrame("Hello World!");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

var contentPane = frame.getContentPane();
contentPane.add(new JLabel("Hello World!"));
contentPane.add(new JLabel("Press Me!"));
contentPane.setLayout(new FlowLayout);

frame.pack();
frame.setVisible(true);

ただし、クライアント側では、ライブラリを使用してそのようなダイアログ ボックスを作成するか、独自のダイアログ ボックスを作成する必要があります。独自のものを作成する場合は、ユーザーが使用しているオペレーティング システムを検出し、それに応じてダイアログ ボックスのスタイルを設定する必要があります。

代わりに jQuery UI を使用した方がよいでしょう。さらに、次の 2 つの理由から、Web アプリケーションをネイティブ アプリケーションのように見せることは良い考えではないと思います。

  1. すべてのオペレーティング システムとすべての構成で同じように見えるわけではありません。そのため、ウェブサイトの雰囲気を壊してネイティブに見えるようにしようとしていることが簡単にわかります. 代わりに、あなたのウェブサイトのテーマに固執してください。
  2. jQuery UI やその種の他のライブラリを使用する方が簡単です。それ以外はやり過ぎであり、時間の無駄です (少なくとも私によると)。
于 2013-02-10T02:22:50.523 に答える
2

jQuery モーダル (または任意の JS モーダル) を引き続き使用できますが、ユーザーのプラットフォームに応じてそれらをスキンすることができます。ただし、特に拡張機能や開発ツールが豊富にある場合、UA 検出は簡単に偽装できます。

さらに、JS には、ビューポートの 4 つの側面を超える管轄権はありません (ブラウザーの拡張機能/プラグインを活用しない限り、追加の手間がかかり、ほとんどの時間が制限されます)。JS でネイティブ操作を直接呼び出すことはできません。

全体として、それは可能だと思いますが、非常にトリッキーです。

于 2013-02-10T02:03:46.157 に答える
0

カスタマイズ可能な JavaScript プラグインを調べてみませんか? 自分でコーディングするよりも、それがおそらく最も簡単でしょう。しかし、参考までに：

    <!--//create a div that has the contents of what you want-->
    <div id="popUpDialog" style='display: none; background-color: #999; position: absolute; top: 300px; left: 200px; width: 120px; height: 120px;'>some Text here<input type='radio' /><br /> Options 2<input type='radio' /></div>

    <!--//create an event to cause this popup to show up somewhere... i.e. a buttons onClick event-->
    <input id='btnTrigger' type='button' value='Show Dialog'></input>
    <input id='btnTrigger2' type='button' value='Close Dialog'></input>
    <script type="text/javascript">
    var el = document.getElementById("btnTrigger");

    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById("popUpDialog");
    popUp.style.display = 'inline-block';
    });

    var el = document.getElementById('btnTrigger2');
    //alert(el);
    el.addEventListener('mousedown', function() {
    var popUp = document.getElementById('popUpDialog');
    popUp.style.display = 'none';
    });
    </script>

ここにあなたのためのjsFiddleがあります http://jsfiddle.net/crislivinitup/9VN7y/

ところで、この例では、div の位置を絶対に変更したり、背景色を設定したりしませんでした (つまり、ポップアップした場合、背景は透明になります)。これは、要素のポップアップを作成する一般的な概念を提供するためのものです。

于 2013-02-10T02:21:41.330 に答える
0

ブートストラップのモデル ダイアログを見てください。かなりクールに見えます :) http://twitter.github.com/bootstrap/javascript.html#modals

于 2013-02-10T02:24:31.230 に答える