在下载link.php中,我正在使用头文件重定向到下载文件。 这里是我想要显示的模式对话框。
< div class =modal fade bs-modal- smtabindex = - 1role =dialogaria-labelledby =mySmallModalLabelaria-hidden =true> < div class =modal-dialog modal-sm> < div class =modal-contentid =dialog-download> < br />< br /> < h2>您的下载已准备就绪。< / h2> < hr /> 您的下载链接在这里< br /> < / div> < / div> < / div>如何在表单提交后显示此对话框? 在此先感谢
解决方案$(#softwareform)。submit (函数(e){ e.preventDefault(); $ .ajax({ type:'POST', data:$(#softwareform)。serialize (), url:'url', success:function(data){ $(#download_link)。html(data); $(#download_modal ).modal(show); } }); return false; }); < div class =modal-dialog modal-sm> < div class =modal-contentid =dialog-download> < br />< br />< h2>您的下载已准备就绪。< / h2> < hr /> 您的下载链接在这里< a id =download_linktarget =_ blank> < / A> < br /> < / div> < / div> < / div>
要显示一个模态,使用函数模态(show)。
这里提交表单时,从php文件返回下载链接,它将通过jquery填充,并显示模式,当用户点击该链接时,文件将被下载
同时检出jsfiddle: - jsfiddle/h3WDq/559/
来源: - 如何使用jQuery打开Bootstrap模式窗口?
您可以将方法更改为POST并使用序列化表单从表单发送数据。
I have a form that after submitting downloads file . I want automatically instead of download automatically the file ..to show a modal-dialog and display the download link.
<form name="softwareform" id="softwareform" action="../downloadlink.php" method="POST" align="left"> <div class="input-group margin-bottom-sm"> <span class="input-group-addon"> <i class="fa fa-windows fa-fw"></i> </span> <input class="form-control" type="text" placeholder="Software Title" name="softtitle" id="softtitle"> </div> <button type="submit" class="btn btn-primary" > <i class="fa fa-cogs"></i>Download File </button> </form>In the download link.php i am redirecting after process using header to the download file. Here is the modal dialog i want to shown .
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content" id="dialog-download"> <br/><br/> <h2>Your Download is ready.</h2> <hr/> Your Download link is here <br/> </div> </div> </div>How can i show this dialog after form submitting? Thanks In advance
解决方案 $("#softwareform").submit(function(e){ e.preventDefault(); $.ajax({ type : 'POST', data: $("#softwareform").serialize(), url : 'url', success : function(data){ $("#download_link").html(data); $("#download_modal").modal("show"); } }); return false; }); <div id="download_modal" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content" id="dialog-download"> <br/><br/><h2>Your Download is ready.</h2> <hr/> Your Download link is here<a id="download_link" target="_blank"> </a> <br/> </div> </div> </div>To show a modal, function modal("show") is used.
Here when submitting the form, return the download link from php file, and it would be populated via jquery and modal will be shown, when user clicks on that link, the file would be downloaded
Also checkout the jsfiddle : - jsfiddle/h3WDq/559/
source :- How to open a Bootstrap modal window using jQuery?
You can change the method to POST and use serialize form to send the data from form.
更多推荐
表单提交后显示模式对话框
发布评论