2017-11-27 6 views
0

私は私のプロジェクトの一環として、以下のドロップダウンリストを持っている:ポップアップテキストエリアボックスを開いて、ユーザーにコメントを送信する方法を教えてください。

<div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject 
     <span class="caret"></span> 
    </button> 
     <ul class="dropdown-menu"> 
       <li class="rem"><a href="#">CS 520</a></li> 
       <li class="rem"><a href="#">CS 530</a></li> 
       <li class="rem"><a href="#">CS 571</a></li> 
       <li class="rem"><a href="#">CS 575</a></li> 

     </ul> 
</div> 

私はのいずれかをクリックすると、私は(警告ではない)ポップアップしたい(コメントを提出する)テキストエリアを含むボックスSUBMIT、CANCEL、RESETボタンがあります。

JavaScript(またはjQuery)を使用してこれを把握することはできません。これを実現する方法はありますか?私は人々がアラートで同様の問題を抱えている例を挙げているが、単純なポップアップボックスでそれを行う必要がある。 これには幾分似た問題の解決策があります。link;しかし、JSコードはあまりに複雑ですね。おかげ

+2

はそうWORKD .. 。モーダルドキュメントを読んでください。彼らはそれを行う方法を示しています – charlietfl

答えて

0

のコードを変更します。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="page"> 
     <div data-role="header"> 
      <h3>Header</h3> 
     </div> 
     <div data-role="content"> 
      <!-- content --> 
      <ul data-role="listview" id="list"> 
       <li data-role="list-divider">Group 1</li> 
        <li data-icon="false"><a href="#" data-id="1">List 1a</a></li> 
        <li data-icon="false"><a href="#" data-id="2">List 1b</a></li> 

        <li data-role="list-divider">Group 2</li> 
        <li data-icon="false"><a href="#" data-id="3">List 2a</a></li> 
      </ul><!-- /content --> 
     </div> 
     <!-- popup-menu --> 
     <div data-role="popup" id="popup-menu"> 
      <ul data-role="listview" style="min-width:210px;"> 
       <li data-role="divider">Choose an action</li> 
        <li><a id="details" href="#">View details</a></li> 
        <li><a id="share" href="#">Share</a></li> 
      </ul> 
     </div><!-- /popup-menu --> 
    </div> 

    <script> 

    var currentId = 0; 
    var baseURL = "person.php?id="; 

    $('#page').on('pageinit', function(){ 
     $('#list li a').click(function(e){ 
      e.preventDefault(); 
      currentId = $(this).attr("data-id"); 
      $("#popup-menu").popup("open", {transition:"slideup"}); 
     }); 
    }); 

    $('#popup-menu').on('popupbeforeposition', function(){ 
     $("#details").attr("href", baseURL + currentId); 
    }); 

    </script> 
</body> 
</html> 

より多くのサポートとヘルプについては、jsFidle Click Here 1でこのリンクを与えることによって、通過またはここにあなたのポップアップを開くためにLink 2
チェックこれらのリンクをチェックして、どのようにそれはあなたが、ブートストラップを使用しているよう

関連する問題