REST APIを使用してポスト・コンテンツをブートストラップ・モーダルにロード

Question

Wordpressポストの内容をブートストラップ・モーダルにロードします。パフォーマンス上の理由から、モーダルが開くときにロードしたいと思います。

私は唯一のコンテンツをロードするために行うことができますどのようにthis in Bootstrap documentation（私はブートストラップ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

下記のスニペットでは、何か特別なことをすることなく、また従来のブートストラップ・モーダル・コードを書かなくても、何かできることができます。

詳細については、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>