ダウンロードURLをBootstrap Modalにダウンロード

Question

私はファイルを渡したいと思うダウンロードURL Bootstrap Modalリンクをクリックすると、Bootstrap Modalに名前、emailaddressなどの情報を入力した後にフッターボタンをクリックしてダウンロードしたいどのように私はこれを達成することができますか？

Answer 1

これを実行する方法はたくさんあります。基本的には、ダウンロードしたいフォーマットに依存します。 .txtファイルとしてダウンロードする簡単な例は以下のとおりです。

HTML：

<textarea>some text here to downlaod</textarea> 
<p><a href="#">Export</a></p> 

のjavascript：

var container = document.querySelector('textarea'); 
var anchor = document.querySelector('a'); 

anchor.onclick = function() { 
    anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value); 
    anchor.download = 'export.txt'; 
}; 

Answer 2

私はあなたの質問についての権利だ場合、私は知りませんが、あなたは単にモーダルのフッターのボタンをトリガーするために作りますダウンロード機能私のサンプルdemoを参照してください。私はあなたの質問について理解した内容

EDIT

は、ユーザーがリンクをクリックしたときに、モーダルは、その後表示され、モーダルのフッターに直接ダウンロードボタンだっただろうです。私のデモでは、モーダルをユーザーにただちに確認するようにしました。

HTML

<!-- Button that acts as a link and triggers the modal to open --> 
<button class="btn btn-link" data-toggle="modal" data-target="#myModal">Download</button> 

<!-- Prompt modal. Notice that this is just a confirmation for downloading the file --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Download</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Do you really want to download the file?</p> 
     </div> 
     <div class="modal-footer"> 
     <!-- The download button --> 
     <a href="http://s1.picswalls.com/wallpapers/2014/08/08/scottish-landscape-hd_015751702_152.jpg" download> 
      <button type="button" class="btn btn-primary">DOWNLOAD</button> 
     </a> 
     <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button> 
     </div> 
    </div> 
    </div> 
</div> 

読むthisはdownload属性の詳細を知っています。