Question

我一直在研究几个小时，但没有找到解决我问题的方法。我有一个Wordpress网站，我在其中构建了一个指标仪表板。我使用bootstrap设置模态窗口以显示每个指标的详细信息。模态窗口使用内联查看器插件/短代码加载Google工作表。问题是所有模态窗口都在页面加载的后台加载，导致页面加载最多需要60秒。我正在寻找一种只在您点击指标时才会加载模态窗口内容的解决方案。

我们非常感谢任何建议。

以下是我的代码示例：

<a class="dash-submetric-link" data-toggle="modal" data-target="#AMI">1</a>

<div id="AMI" class="modal fade" style="display: none;" tabindex="-1">
<div class="modal-dialog" style="width: 80%;">
<div class="modal-content">
<h4 id="AMILabel" class="modal-title">Ashland Move-In Inspections</h4>
<div class="modal-body">
<a class="modal-close" data-dismiss="modal">×</a>
<div style="margin-top: -10px;">[this is where my shortcode goes]</div>
<button class="btn btn-sm btn-default inverted" style="float:right; margin-top: -18px;" type="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Answer 1

我建议在点击时使用javascript添加这些组件，但问题是通过PHP生成短代码，这意味着每次单击某个项目时都需要进行Ajax调用。

发现有人想解决你在这里遇到的同样问题，所以它也可能对你有用： https://wordpress.stackexchange.com/questions/140086/execute-a-shortcode-when-clicking-on-a-image

Answer 2

我通过将[短代码]更改为＆lt; shortcodes＆gt;＆lt; / shortcodes＆gt;来实现了这一点。所以它们不会被PHP解析，然后按照建议附加点击事件，通过Ajax谈话来转换和处理它们。

寻找一种在打开时加载页面加载时加载模态内容的方法

2 个答案: