提交表单后显示模式对话框

Question

我有一个提交下载文件后的表单.我想自动而不是自动下载文件..显示模态对话框并显示下载链接.

<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>

在下载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>

如何在表单提交后显示此对话框？提前致谢

Answer 1

$("#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>

为了显示模态,使用函数模态("show").

在提交表单时,从php文件返回下载链接,它将通过jquery填充并显示模态,当用户点击该链接时,文件将被下载

结帐jsfiddle: - http://jsfiddle.net/h3WDq/559/

source: - 如何使用jQuery打开Bootstrap模式窗口？

您可以将方法更改为POST并使用序列化表单从表单发送数据.