У меня есть форма, которая после отправки файла загрузки. Я хочу автоматически, а не автоматически загружать файл. Чтобы показать модальный диалог и отобразить ссылку для загрузки.
<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> В download link.php я перенаправляю после процесса использование заголовка в файл загрузки. Вот модальный диалог, который я хочу показать.
<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>
Как я могу показать это диалоговое окно после отправки формы? Заранее спасибо
$("#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>
Чтобы показать модальный, используется модальная мода («показать»).
Здесь при отправке формы верните ссылку для загрузки из файла php, и она будет заполнена через jquery, а модальный будет отображаться, когда пользователь нажимает на эту ссылку, файл будет загружен
Также проверьте jsfiddle: – http://jsfiddle.net/h3WDq/559/
source: – Как открыть модальное окно Bootstrap с помощью jQuery?
Вы можете изменить метод на POST и использовать форму сериализации для отправки данных из формы.
Вам нужно будет отправить данные формы через ajax, а затем вручную открыть модальный. На странице формы
<form name="softwareform" id="softwareform" 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> <a href="javascript:void(0);" onclick="submit_form()" class="btn btn-primary" > <i class="fa fa-cogs"></i>Download File </button> </form> <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> <script type="text/javascript"> function submit_form(){ var data = $('#softwareform').serialize(); url = 'downloadlink.php', $.ajax({ method: 'POST', url : 'url', dataType:'html', //json,html you will echo on the php file success : function(data){ $("#download_link").html(data); $("#download_modal").modal("show"); } }); } </script>