Jquery Modal dialog with iframe

Question

0.00/5 (No votes)

See more:

Hi friends,
i need to show the aspx page in Modal jquery window.
in aspx page, it contains iframe which display pdf preview by using PDF.js viewer.
here my code:

C#

function opendialog(url) {
            var h = $(window).height();
            var w = $(window).width();

            $('#PreviewCV').load('Admin/PreviewCV.aspx?URL=' + url, function () {
                return true;
            });
            var $dialog = $('#PreviewCV')
              .dialog({
                  autoOpen: false,
                  modal: false,
                  height: h-(h*25/100),
                  width: w-(w*25/100),
                  open: function (type, data) {
                      $(this).parent().appendTo("form");
                  },
                  close: function (type, data) {
                          location.href = $(location).attr('href');
                      }


              });
            $dialog.dialog("open");

        }

        function PDFViewTemplate(item) {
            if (item.GetMember('PDFPath').Value != null && item.GetMember('PDFPath').Value.length >= 3) {
                return "<a onclick='javascript:opendialog(\"viewer.html?file=PDFCV/" + item.GetMember('PDFPath').Value + "\");'><img src='../images/preview_logo.png'></img></a>";
            }

}

below my aspx page(need to display inside dialog window):

<body>
    <form id="form1" runat="server">
    <div>
    <p>Hello</p>
    <iframe id="iframeCV" runat="server" style="border:0"></iframe>
    </div>
    </form>
</body>

my problem is, the iframe not display in full modal dialog window.(it display in left corner as small box).
also i need to add two buttons as select and reject in this aspx page with this pdf preview.

is there anything wrong in my code?

Thanks,

Regards,
lalitha

Posted 9-Sep-14 4:25am

lalitha19

Updated 9-Sep-14 4:28am

v3

Add a Solution

Comments

ZurdoDev 9-Sep-14 11:16am

Sounds like you need to add height and width to your iframe.

V. 10-Sep-14 9:09am

try simpler showing a simple html into the modal dialog. Boost it with an aspx instead and then add an iframe. If all that works you can try to show the pdf.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2014-09-09T05:27:00

Solution 2

Just fix your HTML, no body tags and some styling:

ASP.NET

<script type="text/javascript">
function doSubmit(){
    //perform form submit operation
}

function closeThis(caller){
    $(caller).closest('.ui-dialog').children('.ui-dialog-content').dialog('close');
    return false;
}
</script>
<div style="width:100%;height:100%">
    <form id="form1" runat="server" style="display:block;">
        <p>Hello</p>
        <iframe id="iframeCV" runat="server" width="100%" height="100%" style="border:0;width:100%;height:100%"></iframe>
        <button onclick="doSubmit();">Submit</button>
        <button onclick="closeThis(this);">Cancel</button>
    </form>
</div>

Posted 9-Sep-14 5:27am

Nathan Minier

Updated 10-Sep-14 2:50am

v4

Comments

lalitha19 10-Sep-14 2:52am

Hi nathan,
thanks for reply.
but still iframe is display in left corner of modal window.
i need to display it in full modal window.

Nathan Minier 10-Sep-14 9:06am

A couple of typo fixes and minor changes mande.

Make sure that in your main css you have :

html body { height:100%; }

Also in your main page:

<!DOCTYPE html>

Finally put a test src onto the iframe.

lalitha19 12-Sep-14 3:59am

Hi,
my page is working fine now. i set width and height of the frame by passing values from jquery via querystring.
but this page is working fine in local.but when i host this page on server, it redirect to default error page. not shows original aspx page.
did you know what is the reason?

Nathan Minier 12-Sep-14 8:44am

I see some mixing of back and forward slashes in your JS methods. Backslahes will often work locally but not remotely. Have you tried normalizing those to forward slashes?

Also, are you using System.Web.Routing for RouteConfig in your global.asax?