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/

来源： - How to open a Bootstrap modal window using jQuery?

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

Answer 2

您需要通过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>

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

2 个答案: