CODEWITHSUNDEEP
jqueryjbox
DCJones
DCJones

Reputation: 3451

jBox not returning content

I am trying to use jBox (by Stephan Wagner) but I can't get my modal window to display a web page. Can anyone see where I am going wrong.

$(document).ready(function() {

new jBox('Modal', {
width: 900,
height: 550,
url: 'http://www.google.com',
},
reload: 'strict'
}).open();

});

Many thanks in advance for your time.

Upvotes: 1

Views: 647

Answers (1)

Stephan Wagner
Stephan Wagner

Reputation: 990

Check out the ajax options, your code should work just fine when you use it in the ajax object: https://stephanwagner.me/jBox/options#ajax

Also, you can only use webpages that have the access control header set, check this fiddle with updated code: https://jsfiddle.net/StephanWagner/7hh5a6oc/

new jBox('Modal', {
  width: 900,
  height: 550,
  ajax: {
    url: '//www.google.com',
    reload: 'strict'
  }
}).open();

Following error will come up: "XMLHttpRequest cannot load https://www.google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access."

So basically, webpages don't like to be loaded from unknown sources. You can always load content via ajax when it is allowed, see this fiddle which uses ajaxresponse.com: https://jsfiddle.net/StephanWagner/569y8wcp/

You can also experiment with iframes, see this fiddle about that: https://jsfiddle.net/StephanWagner/569y8wcp/2/ (We add an iframe with a webpage once the jBox is created). But again, it only works if the webpage allows to be loaded from external sources (Like my webpage: https://jsfiddle.net/StephanWagner/569y8wcp/3/)

Upvotes: 1

Related Questions