点击打开弹出窗体，然后提交下载并关闭它！ 怎么样？

Question

Here is what I am trying to do

1. Click on download link.
2. On click Popup will open. Contact form is in the popup.
3. On submit button send mail and auto start download of PDF file.
4. 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

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

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