Using bootstrap 3.0 modals to load dynamic, remote content within an iframe

后端 未结 5 1115
离开以前
离开以前 2020-12-08 07:57

I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction.

I am trying to load dynamic

5条回答
  •  谎友^
    谎友^ (楼主)
    2020-12-08 08:26

    Why neither data-remote or href work on remote sites like youtube

    Twitter bootstrap's modal uses AJAX to load remote content via data-remote/href. AJAX is constrained by the same origin policy so accessing a site with a different origin, like youtube, will produce this error:

    No 'Access-Control-Allow-Origin' header is present on the requested resource

    So neither data-remote or href will do what you want.

    JSON: If you were getting json data then you could potentially use JSONP. But since you need html, not json, from sites like youtube we need another approach:

    Solution using

    2) add some jquery that is triggered when the modal dialog button is clicked. The following code expects a link destination in a data-src attribute and for the button to have a class modalButton. And optionally you can specify data-width and data-height- otherwise they default to 400 and 300 respectively (of course you can easily change those).

    The attributes are then set on the