テキストフィールドをモーダルダイアログに伝播する方法は？

-1

私は自分のサイトに「リンク」機能を追加しようとしています。そのために私はModal plugin from Twitter Boostrap JSを使用しています。メインページには「リンク」フィールドのみがあり、ユーザーが「リンクを追加」ボタンをクリックすると、モーダルがポップアップし、ユーザーは完全なフォーム（リンク、タイトル、タグ）を表示します。ただし、リンクフィールドに前のステップの値をあらかじめ入力しておきます。これは、delicious.comに「リンクを保存する」ときの状況と似ています。テキストフィールドをモーダルダイアログに伝播する方法は？

しかし、問題は、モーダルダイアログ内にJavaScriptを挿入すると、モーダルダイアログが機能しなくなることです。任意のアイデアはどのようにこの問題を回避するには？どうもありがとうございました！

<html> 
<head> 
    <title>Example</title> 
    <link rel="stylesheet" href="scripts/bootstrap.min.css"> 
    <link rel="stylesheet" href="main.css" /> 
</head> 
<body> 
    <!-- The Modal Dialog --> 
    <div id="modal-from-dom" class="modal hide fade">    
    <div class="modal-body"> 
     <form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data'> 
       Peter 

       <script type="text/javascript"> 
        var linkURL = $('#linkURL').val(); 
        //document.write("<input type='text' class='label-inline' name='linkURL' id='wall-post' value=linkURL>"); 
        document.write(linkURL); 
       </script> 


       <button type='submit' class='btn'>Add Link</button> 
     </form> 
    </div> 
    </div> 
    </div> 
    <div class="container"> 
    <div class="wall-post"> 
     <textarea class='label-inline' name='linkURL' id='linkURL'></textarea> 
     <button data-controls-modal="modal-from-dom" data-backdrop="static" class="btn">Add Link</button> 

    </div> 
    </div> 
    <script src="scripts/jquery.min.js"></script> 
    <script src="scripts/bootstrap-modal.js"></script> 
</body>

出典

2011-10-21 Arman

スクリプトがArmanを動作させないようにするには、いくつかの小さな問題があります。

最初に、jqueryとbootstrapスクリプトをヘッダにロードする必要があります。ブラウザはページが読み込まれるときにそのページを解釈し、ブラウザが$（ "＃linkURL"）というビットにヒットしたときには、それをどうしたらいいのかわかりません。

2番目のビットは、「リンクの追加」ボタンをクリックしたときに、ユーザーがLinkURLボックスに入力した内容のみを知ることができることです。したがって、それ以降はモーダルボックスに実際に入力することしかできません。

このようにすれば、モデルライブラリが提示するEventsを活用して、これを設定できます。

あなたはすべて一緒にこれを置く場合、あなたはこれを取得：

<html> 
    <head> 
     <title>Example</title> 
     <script src="scripts/jquery.min.js" type="text/javascript"></script> 
     <script src="scripts/bootstrap-modal.js" type="text/javascript"></script> 
     <link rel="stylesheet" href="scripts/bootstrap.min.css"> 
     <link rel="stylesheet" href="main.css"> 

     <script type="text/javascript"> 

      $(document).ready(function(){ 
       $('#modal-from-dom').bind('show',function(){ 
        $(".modal-body").html($("#linkURL").val()); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 
     <div id="modal-from-dom" class="modal hide fade"> 
      <div class="modal-header"> 
       <a href="#" class="close">&times;</a> 
       <h3>Add Link</h3> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn primary">Add Link</a> 
      </div> 
     </div> 
     <textarea class='label-inline' name='linkURL' id='linkURL'></textarea> 
     <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Add Link</button> 
    </body> 
    </html>

次に、あなただけの内容を少し変更する必要がある、とあなたが行くために右でなければなりません！

出典

2011-10-21 05:37:09 Joe

ありがとう、ジョー！唯一のことは、私がフォームに3つのフィールド（タイトル、URL、タグ）を表示したいということです。イベントを使用して入力値を設定する方法はありますか？ – Arman

テキストフィールドをモーダルダイアログに伝播する方法は？

答えて

関連する問題