Question

我想在模态窗口中加载外部页面。默认情况下，我已经在模态窗口中添加了一些文本，但我想删除显示"<p> hello folks, good evening</p>"的文本，而是将外部页面调用到包含不同消息的模态窗口

var openModal = function () {
        // close button
        var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');

        // text you get from Ajax
        var content = "<p> hello folks, good evening</p>";

        // Popup body - set width is optional - append button and Ajax msg
        var popup = $("<div/>", {
            "data-role": "popup"
        }).css({
            width: $(window).width() / 0 + "px",
            padding: 5 + "px"
        }).append(closeBtn).append(content);

        // Append it to active page
        $.mobile.pageContainer.append(popup);

        // Create it and add listener to delete it once it's closed
        // open it
        $("[data-role=popup]").popup({
            dismissible: false,
            history: false,
            theme: "b",
            /* or a */
            positionTo: "window",
            overlayTheme: "b",
            /* "b" is recommended for overlay */
            transition: "pop",
            beforeposition: function () {
                $.mobile.pageContainer.pagecontainer("getActivePage")
                    .addClass("blur-filter");
            },
            afterclose: function () {
                $(this).remove();
                $(".blur-filter").removeClass("blur-filter");
            },
            afteropen: function () {
                /* do something */
            }
        }).popup("open");
};

Answer 1

如果您尝试从外部网站加载页面，我想它会像在iframe中加载并将URL传递到您要加载的网站一样简单。在您的JQuery中只需更改这一行：

var content = "<p> hello folks, good evening</p>";

到

var content = "<iframe src='http://google.com' width='200' height='200'></iframe>";

根据需要更改属性。希望有所帮助。

Answer 2

您可以将内容var更改为等于'<iframe style="border: 0px; " src="YOUR_URL" width="100%" height="100%"></iframe>'。例如，'<iframe style="border: 0px; " src="http://jquery.com/" width="100%" height="100%"></iframe>'

我将您的代码添加到小提琴中，以便您可以尝试： http://jsfiddle.net/4pjndrsc/1/

希望有所帮助。祝你好运！

Answer 3

如果您希望从外部网页加载内容而不是嵌入iframe，则可以将$.ajax调用添加到您的函数中：

var openModal = function () {
        // close button
        var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');


        // create the ajax call and create modal in the callback
        $.ajax({
            url: "content_page.html",
            dataType: "html",
            success: function (response) {
                // text you get from Ajax
                var content = response;


                // Popup body - set width is optional - append button and Ajax msg
                var popup = $("<div/>", {
                    "data-role": "popup"
                }).css({
                    width: $(window).width() / 0 + "px",
                    padding: 5 + "px"
                }).append(closeBtn).append(content);

                // Append it to active page
                $.mobile.pageContainer.append(popup);

                // Create it and add listener to delete it once it's closed
                // open it
                $("[data-role=popup]").popup({
                    dismissible: false,
                    history: false,
                    theme: "b",
                    /* or a */
                    positionTo: "window",
                    overlayTheme: "b",
                    /* "b" is recommended for overlay */
                    transition: "pop",
                    beforeposition: function () {
                        $.mobile.pageContainer.pagecontainer("getActivePage")
                            .addClass("blur-filter");
                    },
                    afterclose: function () {
                        $(this).remove();
                        $(".blur-filter").removeClass("blur-filter");
                    },
                    afteropen: function () {
                        /* do something */
                    }
                }).popup("open");
            },
            error: function () {
                //handle error here
            } 


          });

};

使用ajax将外部页面调用到模式窗口中

3 个答案: