Post
Ask Question
Mas

Mas

  • NA
  • 478
  • 70.8k

How to open the document in modal

Feb 8 2020 10:50 PM
Hello Members,
 
Hope you are doing good!!
 
I am trying to open the document in modal, Can any guide me here.
 
Thank you in advance!!
 
Modal CODE
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1">  
  5. <style>  
  6. body {font-family: Arial, Helvetica, sans-serif;}  
  7. /* The Modal (background) */  
  8. .modal {  
  9. display: none; /* Hidden by default */  
  10. position: fixed; /* Stay in place */  
  11. z-index: 1; /* Sit on top */  
  12. padding-top: 100px; /* Location of the box */  
  13. left: 0;  
  14. top: 0;  
  15. width: 100%; /* Full width */  
  16. height: 100%; /* Full height */  
  17. overflow: auto; /* Enable scroll if needed */  
  18. background-color: #000000; /* Fallback color */  
  19. background-color: rgba(0,0,0,0.4); /* Black w/ opacity */  
  20. }  
  21. /* Modal Content */  
  22. .modal-content {  
  23. background-color: #fefefe;  
  24. margin: auto;  
  25. padding: 20px;  
  26. border: 1px solid #888;  
  27. width: 80%;  
  28. }  
  29. /* The Close Button */  
  30. .close {  
  31. color: #aaaaaa;  
  32. float: right;  
  33. font-size: 28px;  
  34. font-weight: bold;  
  35. }  
  36. .close:hover,  
  37. .close:focus {  
  38. color: #000;  
  39. text-decoration: none;  
  40. cursor: pointer;  
  41. }  
  42. </style>  
  43. </head>  
  44. <body>  
  45. <h2>Modal Example</h2>  
  46. <!-- Trigger/Open The Modal -->  
  47. <button id="myBtn">Open Modal</button>  
  48. <!-- The Modal -->  
  49. <div id="myModal" class="modal">  
  50. <%--<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>--%>  
  51. <!-- Modal content -->  
  52. <div class="modal-content">  
  53. <span class="close">×</span>  
  54. <%--<p>Some text in the Modal..</p>--%>  
  55. </div>  
  56. </div>  
  57. <script>  
  58. //function openPdf()  
  59. // {  
  60. // var omyFrame = document.getElementById("myFrame");  
  61. // omyFrame.style.display="block";  
  62. // omyFrame.src = "http://www.africau.edu/images/default/sample.pdf";  
  63. // }  
  64. // Get the modal  
  65. var modal = document.getElementById("myModal");  
  66. // Get the button that opens the modal  
  67. var btn = document.getElementById("myBtn");  
  68. // Get the <span> element that closes the modal  
  69. var span = document.getElementsByClassName("close")[0];  
  70. // When the user clicks the button, open the modal  
  71. btn.onclick = function() {  
  72. modal.style.display = "block";  
  73. }  
  74. // When the user clicks on <span> (x), close the modal  
  75. span.onclick = function() {  
  76. modal.style.display = "none";  
  77. }  
  78. // When the user clicks anywhere outside of the modal, close it  
  79. window.onclick = function(event) {  
  80. if (event.target == modal) {  
  81. modal.style.display = "none";  
  82. }  
  83. }  
  84. </script>  
  85. </body>  
  86. </html>  
  87. We are trying to open the document in Iframe here is the code  
  88. <!DOCTYPE html>  
  89. <html xmlns="http://www.w3.org/1999/xhtml">  
  90. <head runat="server">  
  91. <title>pdf viewer</title>  
  92. </head>  
  93. <body>  
  94. <form id="form1" runat="server">  
  95. <iframe id="myFrame" style="display:none" width="600" height="300"></iframe>  
  96. <input type="button" value="Submit" onclick = "openPdf()"/>  
  97. <script type="text/javascript">  
  98. function openPdf()  
  99. {  
  100. var omyFrame = document.getElementById("myFrame");  
  101. omyFrame.style.display="block";  
  102. omyFrame.src = "http://www.africau.edu/images/default/sample.pdf";  
  103. }  
  104. </script>  
  105. </form>  
  106. </body>  
  107. </html>  
We are trying to open the document in Iframe here is the code
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4. <title>pdf viewer</title>  
  5. </head>  
  6. <body>  
  7. <form id="form1" runat="server">  
  8. <iframe id="myFrame" style="display:none" width="600" height="300"></iframe>  
  9. <input type="button" value="Submit" onclick = "openPdf()"/>  
  10. <script type="text/javascript">  
  11. function openPdf()  
  12. {  
  13. var omyFrame = document.getElementById("myFrame");  
  14. omyFrame.style.display="block";  
  15. omyFrame.src = "http://www.africau.edu/images/default/sample.pdf";  
  16. }  
  17. </script>  
  18. </form>  
  19. </body>  
  20. </html>  
It's Bit urgent, Can any one guide me here..
 
Thank you in advance!!

Answers (1)