On click open popup with form and then on submit download and close it! How?

问题

Here is what I am trying to do

Click on download link.
On click Popup will open. Contact form is in the popup.
On submit button send mail and auto start download of PDF file.
At the same time of starting of download close the popup without redirecting to any page.

I tried using .click() window.open()

$('#theForm').submit(function(){

            event.preventDefault();

            var $form = $( this ),

            url = $form.attr( 'action' );

            var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } );

            /* Alerts the results */

            posting.done(function( data ) {

                $(".modal-backdrop.fade.in").css("display", "none");

                document.getElementById("anchorID").click();

                $("#pdfdownload").css("display", "none");


            });

});

I am able to open download link using this code but browser blocks it as a popup. Please help me to find the solution.

Thank You

回答1:

Browsers block popup windows because they are typically annoying and employed by malicious advertisements.

The better way to go about this is to use a modal window, which is basically the same as a popup, but instead of being a separate browser window, it's simply a separate element within the page that hovers above other content.

回答2:

Use bootstrap modal:

<script>
function send(){
var  name = $("input#name").val();
var  email = $("input#email").val();
$.ajax({
        type: "POST",
        url: "send.php", //your mailing code is place on send.php
        data:'name='+ name'&email='+email,
        success: function(data){
        $('#download').modal('hide');
        window.location.href='uploads/yourpdf.pdf'; //your file location        
            });
        }
}
</script>

The html code

<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#download">Download</a>

<!-- modal for download and contact -->
<div class="modal fade" id="download" role="dialog" >
<div class="modal-dialog" >
<div class="modal-content">
<!-- Your contact form goes here --->
<form method="post">
<input type="text" id="name" placeholder="name">
<input type="text" id="email" placeholder="email">
<button onclick="send();">send</button>
</form>
</div></div></div>

来源：https://stackoverflow.com/questions/38537295/on-click-open-popup-with-form-and-then-on-submit-download-and-close-it-how

标签

javascript

php

jquery

html

popup