Load post content into Bootstrap modal using REST API

Question

I want to load the content of a Wordpress post into a Bootstrap modal. For performance reasons, I want to load it when the modal opens.

I found this in Bootstrap documentation (I'm using Bootstrap v.3.3.7)

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

How I can do to load only the content ?

score 0 · Answer 1 · answered Jan 30 '17 at 17:38

Below given snippet will show you how can you do something that you want without having to do anything extra and also by not even writing conventional bootstrap modal code.

For further reference you can also visit this link. It will show you how you can create modal dynamically with minimum efforts.

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>

Load post content into Bootstrap modal using REST API

1 Answers1