Question

这是我想要做的事情

点击下载链接。
单击弹出窗口将打开。联系表格在弹出窗口中。
在提交按钮上发送邮件并自动开始下载PDF文件。
在开始下载的同时关闭弹出窗口而不重定向到任何页面。

我尝试使用.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");


            });

});

我可以使用此代码打开下载链接，但浏览器会将其作为弹出窗口阻止。请帮我找到解决方案。

谢谢

Answer 1

浏览器阻止弹出窗口，因为它们通常很烦人并被恶意广告使用。

更好的方法是使用modal window，它与弹出窗口基本相同，但它不是一个单独的浏览器窗口，它只是页面中的一个单独元素徘徊在其他内容之上。

Answer 2

使用bootstrap模式：

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

html代码

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

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

2 个答案: