Question

我想将Wordpress帖子的内容加载到Bootstrap模式中。出于性能原因，我想在模态打开时加载它。

我找到this in Bootstrap documentation（我正在使用Bootstrap v.3.3.7）

<a data-toggle="modal" href="/wp-json/wp/v2/POST_TYPE/POST_ID" data-target="#modal">Click me</a>

如何只加载内容？

Answer 1

下面给出的片段将告诉你如何做你想做的事情，而不必做任何额外的事情，甚至不编写传统的bootstrap模态代码。

如需进一步参考，您还可以访问this link。它将向您展示如何以最少的努力动态创建模态。

function show_on_click() {
  BootstrapDialog.show({
    title: "Modal Title Goes Here.",
    message: '<div id="simple-div" style="overflow-x : auto"></div>',
    onshown: function() {
      $.ajax({
        url: 'http://api.fixer.io/latest?base=INR',
        cache: false,
        type: 'GET',
        async: false,
        success: function(data) {
          $('#simple-div').append(JSON.stringify(data));
        }
      });
    },
  });
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<a href="javascript:void(0)" onclick="show_on_click()">Click me</a>

使用REST API将发布内容加载到Bootstrap模式中

1 个答案: