How to open the readed iframe document in popup

Question

Hello Team, Can any one guide me on showing the the document in popup, When i am clicking the iframe loaded document.

Sachin Singh · Answer

set the iframe src to your document and simply open the bootstrap modal "viewport" content= "width=device-width" /> PopupIframe "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" > $( '#ticketViewBtn' ).click(function () { debugger; $( "#myiframe" ).attr( 'src' , 'Your document url' ); $( '#ticketView' ).modal({ show: true }) }); class = "btn btn-primary btn-sm" id= "#ticketViewBtn" data-toggle= "modal" data-target= "#ticketView" > TICKET class = "modal fade" id= "ticketView" tabindex= "-1" role= "dialog" aria-labelledby= "ticketViewLabel" aria-hidden= "true" > class = "modal-dialog" > class = "modal-content" > class = "modal-header" > "button" class = "close" data-dismiss= "modal" aria-hidden= "true" >× class = "modal-title" id= "ticketViewLabel" >TICKET class = "modal-body" > "myiframe" src= "" height= "600px" width= "800px" frameborder= "0" > class = "modal-footer" > "button" class = "btn btn-default" data-dismiss= "modal" >Close

Ankit Kanojia · Answer

Hi Sam, If you wish to open modal popup on click on iframe document then you should handled iframe click handler. Please try below code, its work for me. In iframe click event you can handle modal popup open/close events. HTML iframe > iframe > Javascript $( 'iframe' ).load( function (){ $( this ).contents().find( "body" ).on( 'click' , function (event) { alert( 'test' ); }); }); $( 'iframe' ).attr( "src" , "JavaScript:'iframe content'" ); Here is the jsfiddle link for your reference - http://jsfiddle.net/ankitkanojia/uhotfbw8/2/

Sam · Answer

@sachin singh, @Salman bag Initially we are going to have iframe in that we need to show word document. When we click on the document, It needs to open in pop-up. Please guide me here.

Salman Beg · Answer

Check this link, https://stackoverflow.com/questions/5660263/how-to-display-an-iframe-inside-a-jquery-ui-dialog

How to open the readed iframe document in popup

Answers (4)