2016-07-27 10 views
2

アラートボックスを呼び出していますが、そのボックスに情報を表示して、ユーザー。アラートボックスに情報を表示し、ユーザー入力を受け取ります - 見出し、オプションの選択、確認、キャンセル

私は見出しを持っており、ユーザーからの理由を取得するオプションを選択し、確認ボタンと削除ボタンを押します。ここで

は、これらの要素は

<div style="width:50%;margin-left:auto;margin-right:auto;border:1px solid;padding:20px"> 
 
    <h4 style="margin-top:0px">Alert</h4> 
 
    <p> 
 
     Please select a reason from the list. <i>(required)</i> 
 
    </p> 
 
    <select style="width:100%"> 
 
     <option></option> 
 
     <option>Reason one</option> 
 
     <option>Reason two</option> 
 
     <option>Reason three</option> 
 
    </select> 
 
    &nbsp; 
 
    <div style="float:right;padding-top:10px"> 
 
     <button type="button">Confirm</button> 
 
     <button type="button">Close</button> 
 
    </div> 
 
</div>

ある警告ボックスでこれだけの情報を掲載することが可能ですか?前もって感謝します!

+0

こんにちはとStackOverflowのために歓迎!より良い質問や良いタイトル、悪いタイトルなどの例については、このチュートリアルを読んでください。stackoverflow.com/help/how-to-ask - 他のすべてのものはよく見えます。 – Jurik

+0

アラートボックス?もしあなたが標準のjavascript 'window.alert'を意味しているなら - no、no。あなたが何らかのjavascriptライブラリに入っている何らかの警告ボックスを意味するなら、使用しているライブラリを追加してください。 –

+0

私はアラート機能を呼び出すjavascriptが表示されません。あるいは 'alert box'をオーバーレイとするのですか? – Jurik

答えて

2

私の意見では、その多くの情報をアラートボックスに表示するというサポートはありません。ただし、その目的のためにブートストラップモーダルを使用することができます。

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <link data-require="bootstrap-css" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
 
    <script data-require="jquery" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
 
    <script data-require="bootstrap" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <!-- Button trigger modal --> 
 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
     Call Alert Box 
 
    </button> 
 
    
 
    <div class="modal fade" id="myModal"> 
 
     <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
       <span aria-hidden="true">&times;</span> 
 
      </button> 
 
      <h4 class="modal-title">Alert</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <p>Please select a reason from the list. <i>(required)</i></p> 
 
      <select style="width:100%"> 
 
       <option></option> 
 
       <option>Reason one</option> 
 
       <option>Reason two</option> 
 
       <option>Reason three</option> 
 
      </select> 
 
      &nbsp; 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Save changes</button> 
 
      <button type="button" class="btn btn-primary">Close</button> 
 
      </div> 
 
     </div><!-- /.modal-content --> 
 
     </div><!-- /.modal-dialog --> 
 
    </div><!-- /.modal --> 
 
    </body> 
 

 
</html>

2

javascript警告ボックスで要件を満たすことはできません。入力を取得する唯一のjavascriptのデフォルトの関数は(プロンプト下にスクロール)promptです:

window.prompt("sometext","defaultText"); 

ライトボックス/オーバーレイで表示するというあなたのアプローチが良いです。あなたはあなたのウェブサイトのコンテンツの上にそれを置くことができます。

ご質問のコメントに@Tikkesと書かれているように、jQuery Dialogがお手伝いします。

関連する問題