带有PDF的弹出窗口未显示在另一个模式上

Question

i have a function to display pdf on a modal popup when click on a button. i want to integrate this on another modal popup. but its not working.

my code to display pdf on a modal pop up on button click

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        var fileName = "AFarm.pdf";
        $("#btnShow").click(function () {
            $("#dialog").dialog({
                modal: true,
                title: fileName,
                width: 540,
                height: 450,
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                open: function () {
                    var object = "<object data=\"http://vho.org/aaargh/fran/livres4/AFarm.pdf\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
                    object += "If you are unable to view file, you can download from <a href = \"http://vho.org/aaargh/fran/livres4/AFarm.pdf\">here</a>";
                    object += " or download <a target = \"_blank\" href = \"AFarm.pdf/\">Adobe PDF Reader</a> to view the file.";
                    object += "</object>";
                    object = object.replace(/{FileName}/g, "Files/" + fileName);
                    $("#dialog").html(object);
                }
            });
        });
    });
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>

And the below function where i want to integrate this

$('#manageApplicantModel').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var applicaitonid = button.data('id');
            var modal = $(this);

            $.get(getURL('ManageApplication/getApplicationDetailByid/' + applicaitonid), function (data) {
                var json = new Object();
                json = JSON.parse(data);
                modal.find('#name').text(json.name);
                modal.find('#email').text(json.email);
                modal.find('#phonenum').text(json.phone);
                modal.find('#propertyname').text(json.property_name);
                modal.find('#applieddate').text(json.date_applied);
                modal.find('#address').text(json.property_address);
                modal.find('#divrequirementchecks .reqcheckslbl').empty();
                $.each(json.check, function (index, value) {
                    //list-group-item
                    modal.find('#divrequirementchecks .reqcheckslbl').append(
                        '<li class="">'
                            + value
                            + '</li>');
                });

                modal.find('#divattacheddoc .attacheddoclst').empty();
                $.each(json.documents, function (index, value) {
                    modal.find('#divattacheddoc .attacheddoclst').append(
                        '<li class="list-group-item">'
                            + value.document_name
                            + '<a href="' + value.link + '" download class="pull-right">Download</a>'
                            +'<br>'
                             + '<a id="#mypdf" href="#" class="pull-right">View</a>'
                            + '</li>');
                });
            });

        }
    );

See the view link in this function. on click on this link. i want to show that modal popup with pdf. anybody knows please help me

Answer 1

I wrote a blog post on this...several people got it working using this technique...let me know if it helps your case..

http://www.anujvarma.com/rendering-pdf-in-a-modal-popup-asp-net-mvc/