5

次のようなJavaScriptプロンプトがあり、プロンプトを画面の中央に表示したいと思います。javascriptを使用してこれを行う方法は？

function showUpdate() {     
    var x;    
    var name=prompt("Please enter your name","");

    if ( name != null ) {
      x="Hello " + name + "! How are you today?";
      alert("Input : " + name );          
    }

}

そして、これは私がこれを呼ぶ方法です：

<a onclick = "showUpdate() " style="vertical-align: middle;" class="parent" href=""><span>5. Missed P/U Comments</span></a>

プロンプトが左隅IEと中央に移動することを除いて、それは検索で機能しますがFirefox 、両方のブラウザで機能するには同じソリューションが必要です。

4

5 に答える 5

4

（promptおよびalert）ポップアップは、使用しているブラウザによって実装が異なります。これは、ポップアップがブラウザの機能であり、JavaScriptオブジェクトなどではないためです。（コンソールがブラウザーごとに異なるように、実装によって異なります。）

プロンプトを一貫して配置/スタイル設定する必要がある場合は、独自のプロンプトを作成する必要があります。

簡単な方法は、 jQueryUIのようなライブラリを使用することです。

一方、自分で作成することもできます。

document.getElementById('showPromptButton').addEventListener('click', showSprompt);
document.getElementById('promptButton').addEventListener('click', submitPrompt);
var prompt = document.getElementById('myPrompt');
var promptAnswer = document.getElementById('promptAnswer');

function showSprompt() {
    promptAnswer.value = ''; // Reset the prompt's answer
    document.getElementById('promptQuestion').innerText = "What's your question?"; // set the prompt's question
    prompt.style.display = 'block'; // Show the prompt
}

function submitPrompt() {
    var answer = promptAnswer.value; // Get the answer
    prompt.style.display = 'none';   // Hide the prompt
    console.log(answer);
}
#myPrompt{
  display:none;
  /* Style your prompt here. */
}
<input id="showPromptButton" type="button" value="Show Prompt" />
<div id="myPrompt" class="proptDiv">
  <span id="promptQuestion"></span>
  <input id="promptAnswer" type="text" />
  <input id="promptButton" type="button" value="Submit" />
</div>

于 2012-12-27T10:41:15.847 に答える
2

デフォルトの JavaScript プロンプトをカスタマイズまたは配置することはできません。回避策については、この SO の回答を確認してください。

JavaScript プロンプトをカスタマイズするには?

于 2012-12-27T10:27:34.227 に答える
2

...しかし、両方のブラウザーで機能するには同じソリューションが必要です。

prompt（およびそのいとこalert）は非常に時代遅れです。それらの外観や位置を制御することはできません。ほとんどの場合、それらを避けるのが最善です。

代わりに、絶対配置div(またはその他のブロック要素) を使用してポップアップ メッセージを表示できます。これにより、位置を完全に制御できるだけでなく、スタイルも完全に制御できます。周りを見回すと、これを行うための多数の例とそのためのツールキットが見つかります。本当に必要でない限り、自分で作成する必要はありません。

最終的にどちらの方法で実行するかに関係なく、それを使用するロジックは変更する必要があります。これpromptは、同期的 (ページ上のすべてのスクリプトが停止してプロンプトを待機する) ためです。指向）。たとえば、ポップアップを使用するための新しいコードは次のようになります。

function showUpdate() {

    popup("Please enter your name","", function(name) {
        if (name!=null)
        {
            x="Hello " + name + "! How are you today?";
            alert("Input : "+name); // <== I left this one alone, looks like debugging
        }
    });
}
于 2012-12-27T10:27:42.640 に答える
2

プロンプト、アラート、および確認は、各ブラウザーがユーザーに表示する独自の方法を持つ基本的な機能です。これらの関数をカスタマイズする理由もありません。

高度な機能と完全なカスタマイズが本当に必要な場合は、独自のカスタム アラートを作成する必要があります。これは、いくつかの方法のいずれかで行うことができます。私が提案する 2 つのオプションのうちの 1 つは、Javascript で 2 つの div (ページの残りの部分をフェードアウトするものとアラートのように表示されるもの) を作成し、それらを疑似プロンプトとして使用することです。2 つ目は、新しいウィンドウを作成し、その機能の多くを削除し、新しく開いたページの HTML を変更して、アラートのように見せることです。

ラストはやり過ぎ感あるけど。プロンプトが必要な場合、それらは醜いです... そうでない場合は、配置された div と色あせた背景を使用して、自分で何かを作成する必要があります。

于 2012-12-27T10:27:55.270 に答える
2

注: このメソッドwindow.showModalDialog()は廃止されており、最新のブラウザーではサポートされていません。使用しないでください。

の位置を変更することはできませんが、次のページで説明されているようにwindow.alert()行うことができます: http://bytes.com/topic/javascript/answers/849283-change-position-alert-possiblewindow.showModalDialog()

https://developer.mozilla.org/en-US/docs/DOM/window.showModalDialog

于 2012-12-27T10:29:48.997 に答える