Open a pdf in a modal

[Priyabrata_C_]

I am trying to open a pdf document from a html link in intel xdk.

I am trying to do this by opening the pdf in a modal with an iframe element in it. Unfortunately that isn't working the phones.

            <div class="modal outer-element uib_w_20" data-uib="twitter%20bootstrap/modal" data-ver="1" data-backdrop="true" id="popShowHref">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" data-dismiss="modal">x</button>
                            <h4 class="modal-title">
                                <span><i class="glyphicon glyphicon-cog"></i> Notice</span>
                            </h4>
                        </div>

                        <div class="modal-body">
                            <div class="col uib_col_12 single-col" data-uib="layout/col" data-ver="0">
                                <div class="widget-container content-area vertical-col">
                                    <form>
                                        <iframe height="200" width="200" src="http://www.ccs.neu.edu/home/riccardo/courses/cs6750-fa09/talks/Ellis-elliptic-curve-crypto.pdf"></iframe>
                                    </form>
                                    <!--<span class="uib_shim"></span>-->
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer"></div>
                    </div>
                </div>
            </div>

The above code isn't working. When I am opening this in XDK emulator, its asking me to download the pdf, but when I am opening this in phone, I do not get any option and the iframe remains blank!

Any solution to this problem ?

[John_H_Intel2]

You should use the In App Browser plugin provided in the XDK instead of iframe.

[Anusha_M_Intel1]

Some URLs do not render in iFrame due to security issues. You best bet is the InAppBrowser plugin. Here is the link to its documentation: http://docs.phonegap.com/en/edge/cordova_inappbrowser_inappbrowser.md.html

For example, if you want to display the webpage in the click of a button, this is all you have to do:

    $(document).on("click", ".uib_w_3", function(evt)
    {
        /* your code goes here */ 
         var ref = window.open('https://software.intel.com/en-us/xdk/articles/android-splash-screens-usi...', '_blank', 'location=yes');
    });