实现twitter bootstrap模态窗口调用html

时间:2013-09-12 17:33:42

标签: php wordpress twitter-bootstrap bootstrap-modal

我需要从.php文件中调用twitter模式窗口中的html数据。如何调用此功能?下面的脚本在php文件中,我需要在单击链接后在模态窗口中调用它。我能够触发模态窗口而不是数据。

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title><?php echo $post->post_title; ?></title>
<meta name=”robots” content=”noindex”/>
</head>
<body>
<div style=”"><?php echo $image; ?></div>
<?php echo $post->post_title; ?></b>
<p style=”float: left;”>Testing</p>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

您可以通过将HTML放在名为remote.html的文件中,然后运行此命令来实现此目的:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

或者,您可以使用jquery将HTML插入到模态窗口中,如下所示:

$('.modal-button').click(function() {

    var myHTML = "[YOUR HTML]";
    $('.modal-body').html(myHTML);

});

答案 1 :(得分:0)

你想要的是在模态右边显示图像和标题数据吗?

<div>
<div id="image"></div>
<span id="myTitle"></span></b>
<p style=”float: left;”>Testing</p>
</div>

将此内容放在modal中,并通过ajax调用

获取图像和标题数据
  $(function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Fetch.php",//give the path of the php file or the function
                    data: '{ "query": ' + data + ' }',//place the query data
                    dataType: "json",
                    success: function (msg) {
                        AjaxSucceeded(msg);
                    },
                    failure: function (response) {
                        alert("Failure");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("Error " + jqXHR + " " + textStatus.responseText + " " + errorThrown);
                    }
                });
            });

AjaxSucceeded(msg){
//replace the div with the image and the title
$(#image).innerHTML=msg.Image;
$(#myTitle).innerHTML=msg.Title;
}

干杯!!!