load external URL into modal jquery ui dialog

Question

why doesn t this display ibm com into a 400x500px modal  The  section appears to be correct  but it doesn t cause the popup modal to appear    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt    lt head gt   lt title gt test lt  title gt   lt meta http-equiv  content-type  content  text html charset utf-8    gt    lt link rel  stylesheet  type  text css  media  screen  href  css jquery-ui-1 8 23 custom css   gt    lt  head gt    lt body gt    lt p gt First open a modal  lt a href  http   ibm com  class  example  gt  dialog lt  a gt  lt  p gt    lt  body gt    lt  --jQuery-- gt   lt script src  http   code jquery com jquery-latest pack js  gt  lt  script gt   lt script src  js jquery-ui-1 8 23 custom min js  gt  lt  script gt    lt script type  text javascript  gt  function showDialog            example   dialog       height  400              width  500              modal  true  return false         lt  script gt    lt  html gt

User · Answer

var page    http   somurl com asom php aspx    var  dialog       lt div gt  lt  div gt                    html   lt iframe style  border  0px    src      page      width  100   height  100   gt  lt  iframe gt                    dialog                      autoOpen  false                     modal  true                     height  625                     width  500                     title   Some title                      dialog dialog  open      Use this inside a function  This is great if you really want to load an external URL as an IFRAME  Also make sure that in you custom jqueryUI you have the dialog

User · Answer

Modals always load the content into an element on the page  which more often than not is a div  Think of this div as the iframe equivalent when it comes to jQuery UI Dialogs  Now it depends on your requirements whether you want static content that resides within the page or you want to fetch the content from some other location  You may use this code and see if it works for you    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt    lt head gt   lt title gt test lt  title gt   lt meta http-equiv  content-type  content  text html charset utf-8    gt    lt link rel  stylesheet  type  text css  media  screen  href  css jquery-ui-1 8 23 custom css   gt    lt  head gt    lt body gt        lt p gt First open a modal  lt a href  http   ibm com  class  example  gt  dialog lt  a gt  lt  p gt       lt div id  dialog  gt  lt  div gt   lt  body gt    lt  --jQuery-- gt   lt script src  http   code jquery com jquery-latest pack js  gt  lt  script gt   lt script src  js jquery-ui-1 8 23 custom min js  gt  lt  script gt    lt script type  text javascript  gt     function      modal window start     example   unbind  click        example   bind  click  function        showDialog        var titletext   this  attr  title        var openpage   this  attr  href            dialog   dialog   option    title   titletext            dialog   dialog   option    resizable   false            dialog   dialog   option    buttons               Close   function                    this  dialog  close                  this  dialog  destroy                               dialog   load openpage       return false         modal window end    Modal Window Initiation start  function showDialog            dialog   dialog           height  400          width  500          modal  true         lt  script gt    lt  html gt    There are  however  a few things which you should keep in mind  You will not be able to load remote URL s on your local system  you need to upload to a server if you want to load remote URL  Even then  you may only load URL s which belong to the same domain  e g  if you upload this file to  www example com  you may only access files hosted on  www example com   For loading external links this might help  All this information you will find in the link as suggested by  Robin

User · Answer

EDIT  This answer might be outdated if you re using a recent version of jQueryUI   For an anchor to trigger the dialog -   lt a href  http   ibm com  class  example  gt    Here s the script -      a example   click function        bind handlers    var url     this  attr  href       showDialog url       return false           targetDiv   dialog      create dialog  but keep it closed    autoOpen  false     height  300     width  350     modal  true      function showDialog url      load content and open dialog         targetDiv   load url           targetDiv   dialog  open

User · Answer

x000D   x000D  if you are using   Bootstrap   this is solution   x000D   x000D    document  ready function e    x000D          bootpopup   click function    x000D    var frametarget     this  attr  href    x000D    targetmodal     myModal    x000D              modeliframe   attr  src   frametarget       x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap-theme min css  integrity  sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl Sp  crossorigin  anonymous  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D   lt  -- Button trigger modal -- gt  x000D   lt a  href  http   twitter github io bootstrap   title  Edit Transaction  class  btn btn-primary btn-lg bootpopup  data-toggle  modal  data-target   myModal  gt  x000D    Launch demo modal x000D   lt  a gt  x000D   x000D   lt  -- Modal -- gt  x000D   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt  x000D     lt div class  modal-dialog  role  document  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D            lt iframe src    id  modeliframe  style  zoom 0 60  frameborder  0  height  250  width  99 6   gt  lt  iframe gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I did it this way  where  struts2ActionName  is the struts2 action in my case  You may use any url instead   var urlAdditionCert    pageContext request contextPath  struts2ActionName       dialogId   load  urlAdditionCert  dialog       modal  true      height      body   height        width      body   width    8

User · Answer

The following will work out of the box on any site    x000D   x000D   lt script src    code jquery com jquery-1 11 1 min js  gt  lt  script gt  x000D   lt script src    code jquery com ui 1 11 1 jquery-ui min js  gt  lt  script gt  x000D    x000D       lt div class  dialogBox  style  border 1px solid gray   gt  x000D           lt a href     class  exampleLink  gt Test lt  a gt  x000D           lt  -- TODO  Change above href -- gt  x000D           lt  -- NOTE  Must be a local url  not cross domain -- gt  x000D       lt  div gt  x000D       x000D       lt script type  text javascript  gt  x000D            x000D   x000D          var  modalDialog       lt div  gt       x000D             class    exampleModal    x000D             id    exampleModal1   x000D             x000D           appendTo  body   x000D           dialog   x000D              resizable  false  x000D              autoOpen  false  x000D              height  300  x000D              width  350  x000D              show   fold   x000D              buttons    x000D                   Close   function      x000D                       modalDialog dialog  close    x000D                    x000D                 x000D              modal  true x000D              x000D   x000D            function      x000D                 a exampleLink   on  click   function  e    x000D                  e preventDefault    x000D                     TODO  Undo comments  below x000D                    var url      a exampleLink first   attr  href    x000D                     modalDialog load url   x000D                   modalDialog dialog  open    x000D                  x000D              x000D   x000D       lt  script gt  x000D   x000D   x000D

[jquery] load external URL into modal jquery ui dialog

Examples related to jquery

Examples related to jquery-ui