Friday, 7 June 2013

Jquery: Open PDF File in browser with Modal Popup using Jquery Media Plugin



Online document viewing is becoming popular these days.The Jquery Media Plugin supports unobtrusive conversion of standard markup into rich media content. It can be used to embed virtually any media type, including Flash, QuickTime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more into a web page

To View PDF File with Jquery Modal Popup we need to implement 2 Jquery.

1.       Jquery Media Plugin – Which is used to view PDF file in browser
2.       Jquery Simple Dialog – Simple Modal Popup Dialogue box with CSS 

Code: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- CSS Start-->
    <link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
    <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
    <!-- CSS End-->
    <!-- Page Script Start-->
    <script src="script/jquery-1.9.1.js" type="text/javascript"></script>
    <!-- Jquery for Modal Dialog Box  Start-->
    <script src="script/jquery.simplemodal.js" type="text/javascript"></script>
    <script src="script/basic.js" type="text/javascript"></script>
    <!-- Jquery for Modal Dialog Box End-->
    <!-- Jquery for Modal Dialog Box  Start-->
    <script src="script/jquery.media.js" type="text/javascript"></script>
    <script src="script/jquery.metadata.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('a.media').media({ width: 1000, height: 400 });
        });       
    </script>
    <!-- Jquery for Modal Dialog Box  Start-->
</head>
<body>
    <!--Button to Open Modal Dialog Box-->
    <div id='basic-modal'>
        <input type='button' name='basic' value='Open PDF File' class='basic' />
    </div>
    <!--Button to Open Modal Dialog Box-->
    <!--Modal Dialog Box-->
    <div id="basic-modal-content">
        <h3>
            PDF File
        </h3>
        <p>
            <div>
                <!-- PDF File Link -->
                <a class="media" href="FILES/guice.pdf"></a>
                <!-- PDF File Link -->
            </div>
        </p>
    </div>
    <!--Modal Dialog Box-->
    <!-- Close Modal Dialogue image -->
    <div style='display: none'>
        <img src="images/x.png" />
    </div>
    <!-- Close Modal Dialogue image -->
</body>
</html>

Once we place Jquery and CSS as shown in above code it will display PDF File in browser as shown below Image:

121 comments:

  1. how can i get all css and jquery if u dnt upload it no meaning of tis code

    ReplyDelete
  2. You can upload the css-js? I searched and found the css and the js, but maybe I found other versions because not work.

    ReplyDelete
  3. Hi,after viewing your image i feel it must work.But Please upload the css and js file.so that i can make it to work on my project.After googling the required css and js it is not working as expected.Waiting for your sweet response.

    ReplyDelete
  4. Hi Mohanty,

    Provide your email ID and will send CSS and JS code.

    Due to limitations of blogger, we are unable to post it here.

    Regards,
    200OK Solutions

    ReplyDelete
    Replies
    1. my email id is anjalikarn1@gmail.com can you please send me css and jquery file.. i will be thankful to u for this

      Delete
    2. hi! my email id is j.z3an@hotmail.com can you please send me css and jquery file. i will be thankful to u for this

      John

      Delete
    3. Please share the CSS and jquery files to my email address (stepdexter@gmail.com).

      Regards
      Josphat

      Delete
    4. bsharathnaik@gmail.com

      Delete
    5. Hi :)
      please send me the css and js files
      my e-mail is : hammami.borhen@gmail.com
      Thank you.
      Delete

      Delete
    6. Hi can you please send to me these css and js files, my mail id: gvls.msp@gmail.com - thanks in advance-

      Delete
    7. Hi can you please send to me these css and js files, my mail id: irfanshaikh255@gmail.com - thanks in advance

      Delete
    8. hi there,
      can you please send me these source code of this to the_omedetou@yahoo.co.id
      best regards, agustian

      Delete
  5. Hi Can you please send me the CSS and JS code. I would like to use this feature in my application.

    ReplyDelete
  6. hi plz send the code i want to integrate my application mendu.sriram@gmail.com

    ReplyDelete
    Replies
    1. Hi,

      CSS code forwarded on your email ID.

      Regards,
      200OK Solutions

      Delete
    2. Hi :)
      please send me the css and js files
      my e-mail is : hammami.borhen@gmail.com
      Thank you.

      Delete
  7. Please send files at my email:umairtaj2012@gmail.com

    ReplyDelete
  8. Please send files at my email:mars.oct@gmail.com

    ReplyDelete
  9. Hi,
    Can you send CSS and JS to me.
    randarasa@gmail.com

    ReplyDelete
  10. If you don't mind, can you please send demo source to: ximbalo@gmail.com -- Thank you.

    ReplyDelete
  11. If you don't mind, can you please send demo source to: ximbalo@gmail.com -- Thank you.

    ReplyDelete
  12. plz send css and js files to my email Id:venkat.sana@aceengineer.com

    ReplyDelete
  13. send me to adi_sadli_hamzah@yahoo.com

    ReplyDelete
  14. Hello, please send the js and the css to pinterbela007@gmail.com. Thanks.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. hi, this looks really nice, could you send me the css & js.

    my e-mail is: caifan1185@yahoo.com.mx

    ReplyDelete
  17. Hey if its not too late could I also get the files please? my gmail is francoisjgosselin@gmail.com

    Thanx a lot 200OK!

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. very good work! can you send me these files too?
    ruedapc2@hotmail.com
    very thanks

    ReplyDelete
  20. Send the code to sasikumarkdm@gmail.com

    ReplyDelete
  21. Very good work! can you send me these files too?
    obie.st3[at]gmail.com
    Thanks

    ReplyDelete
  22. pls send the code to sanjeevmodi9@gmail.com

    Thanks

    ReplyDelete
  23. Hi 200OK Solutions! Could you please send me a copy of the files in my email, maverickaleria@gmail.com

    I would like to try this solution to the site I'm making. Thank you!

    ReplyDelete
  24. This is pretty clever, could you email me a copy at cking24343@gmail.com?

    ReplyDelete
  25. Can you please email me the necessary files at fatihari@gmail.com
    thanks a lot.

    ReplyDelete
  26. pls send the css-code to maati.lasly@googlemail.com

    ReplyDelete
  27. plz send css and js file to kumardnsony@gmail.com

    ReplyDelete
  28. Can you please email me the necessary files to works, at ivilla.stc@gmail.com

    ReplyDelete
  29. can you please email me the necessary files to works, at maidenoz_5@hotmail.com

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Could you please send me the files at anjansid@gmail.com. Thank you.

    ReplyDelete
  32. Could you please send me the files at mxdfrnr@googlemail.com, thanks alot.

    ReplyDelete
  33. send me too hehe thanks a lot.. interardo1908@gmail.com

    ReplyDelete
  34. Hi!
    May you send me your files at: ducminhdo@gmail.com.
    Thanks!

    ReplyDelete
  35. You can find PDF forms you need at PDFfiller.com
    http://goo.gl/lwsTUO

    You can edit your PDF form, fill the text fields, add a variety of checkmarks, digitally eSign the PDF form and even add pictures. After your PDF form is completed, it can be printed, emailed, faxed or saved on your computer. You can even send fillable PDF forms to your customers, employees, vendors and partners.

    ReplyDelete
  36. Hello, please send the js and the css to vetr7367@gmail.com. Thanks.

    ReplyDelete
  37. Hello, if you could please send the js and css to sean.mmsd@gmail.com,

    thank you!

    ReplyDelete
  38. Hello, Can you send us the js ans the css please, that would be awesome

    lu_h@hotmail.fr

    ReplyDelete
  39. Hello, can u send me the js and the css to vd1911@gmail.com. I really appreciate if u want too.. ^^

    ReplyDelete
  40. erland.muchasaj@gmail.com

    Please send me as well the CSS and JS cuz i really do need it for my app... Thanks in advance

    ReplyDelete
  41. Would you please send me CSS and JS files to mirror4040@gmail.com
    Thanks

    ReplyDelete
  42. please send me the code to paulbtz@gmail.com

    ReplyDelete
  43. Hi,
    Please share the code at nov17megha@yahoo.co.in

    Thanks
    Megha

    ReplyDelete
  44. hi...
    please in messemman@gmail.com also..

    Thanks
    Boo

    ReplyDelete
  45. Hi,

    Awesome solution!!!!!
    Is it possible to have the javascript and Css of your solution been looking for this solution for ages.

    Regards

    ReplyDelete
  46. Hi 200K ,

    please send it to me , my email is bakowop@gmail.com

    Thanks a lot

    ReplyDelete
  47. Hi,
    Can i have the relevent files please. css and js. thank you.

    ReplyDelete
  48. Hi,

    Can i have relevant file please .css and .js
    please send on sam.sonawane09@gmail.com


    Thank you.

    ReplyDelete
  49. Hello, can u send me the js and the css to digambar.kashid@live.in I really appreciate.

    Reply

    ReplyDelete
  50. Hello, could you please send me the js and css to pritijain1008@gmail.com,

    thank you!

    ReplyDelete
  51. Hi, could you please send me the js and css to raghurocks30@gmail.com,

    Thank you.

    ReplyDelete
  52. Hi 200OK Solutions! Could you please send me a copy of the files in my email, raevictorio@gmail.com

    I would like to try this solution to the site I'm making. Thank you!

    ReplyDelete
  53. Could u send me css and js file please thanks in advance
    mail:belalsalah140@gmail.com

    ReplyDelete
  54. Hi,after viewing your image i feel it must work.But Please upload the css and js file.so that i can make it to work on my project.After googling the required css and js it is not working as expected.Waiting for your sweet response.

    Can u please mail it to venuturup@gmail.com

    ReplyDelete
  55. Hi, Can you please send me the css and js files to sanker.nallusamy@gmail.com, Thanks in advance.

    ReplyDelete
  56. Hi...
    Can you please send me the supported files.....please its not working for me with out that files.
    mail id: srinivas.jangeti@gmail.com
    Thanks in advance

    ReplyDelete
  57. Hi, Can you please send me the css and js files to noamtana@gmail.com, Thanks very very much

    ReplyDelete
  58. Hi, Can you please send me the css and js files to m.sijothomas@gmail.com, Thanks

    ReplyDelete
  59. hey
    can u send me the css and js files ..
    rajesh@mindgrep.com

    ReplyDelete
  60. hi, can you please send the files on ankurgs@gmail.com, thanks.

    ReplyDelete
  61. hello
    can u send me the css and js files ..

    kovadiya.tohid@gmail.com

    ReplyDelete
  62. Great Job Man!!! Can you send me css and js files ...
    giante09@gmail.com
    Thank you!!!

    ReplyDelete
  63. Great work!
    Can u please send me files on deepd07mane@gmail.com

    Thank you.

    ReplyDelete
  64. Please send all the files for this pdf popup functionality to my mail id.
    umapathi.16@gmail.com

    Kind regards
    Umapathi A

    ReplyDelete
  65. Please send all the files for this popup..
    it's my mail id: kumarkovuru@gmail.com
    Thanks & regards
    Kumar

    ReplyDelete
    Replies
    1. i didn't get any mail, Pls anyone send me CSS, .Js File at kumarkovuru@gmail.com

      Delete
  66. Good day
    Please send me the files at kpmohanoe@gmail.com
    Thanks in advance.

    ReplyDelete
  67. please send me the code tellmwas@gmail.com

    ReplyDelete
  68. Please email css and js files to pjschloemer@gmail.com

    Thanks have a great day!

    :-)

    ReplyDelete
  69. Could you please send me the files at saadlak_43@hotmail.com. Thank you

    ReplyDelete
  70. ...and at madalinbadea@gmail.com, please!

    Thank you in advance!
    Madalin

    ReplyDelete
  71. please send me the files at devd3js@gmail.com

    ReplyDelete
  72. please send me css and code in my mail id: nitinkaundal@yahoo.com

    ReplyDelete
  73. Please send all the files for this popup..
    it's my mail id: smail.fathi@gmail.com

    Thanks & regards

    ReplyDelete
  74. hi sir,
    please send me css and script file on my emailId : shiv7063@gmail.com

    ReplyDelete
  75. haii
    please send me css and script file on my emailId : bincarhrp@gmail.com

    ReplyDelete
  76. Hello Please send me the css & js files my email id is abhosale74@gmail.com

    ReplyDelete
  77. Hello Please send me the css & js files my email id is bhaveshpatel27771@gmail.com

    ReplyDelete
  78. please send me css and js files to rmacteague@gmail.com

    ReplyDelete
  79. please send css & code at faster786@gmail.com

    ReplyDelete
  80. can you please send the css and js to my mail for this demo Jquery: Open PDF File in browser with Modal Popup using Jquery Media Plugin

    ReplyDelete
  81. Hello,

    I would love to see some working demo code for this.

    ReplyDelete
  82. hi! my email id is j.z3an@hotmail.com can you please send me css and jquery file. i will be thankful to u for this

    ReplyDelete
  83. Hi,
    Thanks... solution is looking so good.
    Can you provide js and css so that I can try it.

    Its urgent, please send ASAP.

    Email ID : tomargs1978@gmail.com, tomargs11@gmail.com

    Ghanshyam

    ReplyDelete
  84. Hi,

    Please send CSS and JS files to rajender83.dev@gmail.com.

    Thanks
    Raj

    ReplyDelete
  85. Hi,

    Please send CSS and JS files to addrashid@gmail.com.

    Thanks
    Raj

    ReplyDelete
  86. please send me the css and js file to saridhamsan@gmail.com

    ReplyDelete
  87. Hi,
    Thanks... solution is looking so good.
    Can you provide js and css so that I can try it.

    Its urgent, please send ASAP.

    Email ID : ss.chand2009@gmail.com

    shiv

    ReplyDelete
  88. Hi 200OK Solutions! Could you please send me a copy of the files in my email,
    renukasahani20@gmail.com

    I would like to try this solution to the site I'm making. Thank you!

    ReplyDelete
  89. Hello 200OK Solutions! Finally I found was I looking for..
    I really need this source for my project site..

    Can't u send to my email: rikisuryadi2422@gmail.com

    Good job. Thanks u...

    ReplyDelete
  90. hi, may i have the css and js files.
    My email id is "moumitadaspurba@gmail.com"

    ReplyDelete
  91. please send me the css and js files at mohitsenapaty@gmail.com.

    ReplyDelete
  92. Please share the CSS and jquery files to my email address ( p.nagy1975@gmail.com ).

    Kind regards
    Peter Nagy

    ReplyDelete
  93. Kindly share the CSS and Js to my email-id: praveenjude.js@gmail.com

    ReplyDelete
  94. please send me the css and js files at alaa.nizar@gmail.com. Thank you

    ReplyDelete
  95. Could you possible send me the css and files as well please. sandeeprangnani2005@hotmail.com

    ReplyDelete
  96. Hi :)
    please send me the css and js files
    my e-mail is : hammami.borhen@gmail.com
    Thank you.

    ReplyDelete
  97. can you also send me the css and js files, please.
    my e-mail: gregchi@gmail.com
    Thank you.

    ReplyDelete
  98. Can you please send me css and js files, please,
    my mail id: gvls.msp@gmail.com,
    Thank you

    ReplyDelete
  99. Please send me the css and js files
    my e-mail is : rtlsc1990@gmail.com
    Thank you.

    ReplyDelete
  100. hi please send me the css and js to this mail id sulo2804@gmail.com
    thanks in advance

    ReplyDelete
  101. Hi, please send me the css and js files
    my e-mail is : karl.pcd@gmail.com
    Thanks a lot.

    ReplyDelete
  102. Hi, please send this plugin (all files) to my email: 19gibo90@gmail.com
    Thanks a lot.

    ReplyDelete
  103. hi there,
    can you please send me these source code of this to the.omedetou@google.com
    best regards, agustian

    ReplyDelete
  104. Hi,
    Please share you code , my mail id: balajimogadali@gmail.com

    ReplyDelete
  105. please share your code my email = deny.hilman@gmail.com

    ReplyDelete
  106. Hi :)
    please send me the css and js files
    my e-mail is : laurahreviejo@gmail.com
    Thank you.

    ReplyDelete
  107. Please send me the css and js files
    E-mail: laurahreviejo@gmail.com
    Thank you.

    ReplyDelete
  108. plz send css and jquery to this pravee.ckt@gmail.com

    ReplyDelete
  109. Please send me the CSS and JS files.
    E mail - niyascr008@yahoo.co.in
    Thanks in advance

    ReplyDelete