打开模式onclick按钮时，它是由PHP echo产生的

Question

我需要你的帮助。我有一个按钮，由PHP文件响应到HTML文件。当按钮被点击，然后我想要一个模态显示在HTML文件。有人知道我该怎么做吗?

PHP回声:

'<div class="modal fade" id="modelWindow" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">'. $row['title'] .'</h4>
            </div>
           <div class="modal-body">
       <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
       <p class="well">'. $row['description'] .'<p>
        </div>
       <div class="modal-footer">
   <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
           </div>
          </div>
         </div>
        </div>
           <div class="row top-buffer">
           <div class="col-md-6">
     <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
       </div>
       <div class="col-md-6">
       <h3>'. $row['title'] .'</h3>
       <p class="well">'. $row['description'] .'<p>
       <div class="row top-buffer">
      <div class="col-md-5 col-md-offset-1">
      <img src="img/link_icon.png" class="img-rounded" width="20px" height="20px"/>
  <a href="www.link.com">LINK</a>
               </div>
         <div class="col-md-6">
  <button class="btn btn-primary pull-right" id="btn">More...</button>
                         </div>
                    </div>
               </div>
          </div>'

第一部分是模式框，第二部分是HTML输出

触发模态的脚本:

<script type="text/javascript">
$("#btn").click(function() {
    $("#modelWindow").modal("show");
    });
</script>

我是否需要将脚本添加到外部文件并在php中调用它，或者有另一种方法来做到这一点?由于

Answer 1

您可以将脚本包含在php echo中，只需确保所有依赖项如jQuery和Bootstrap.js都包含在将呈现回声数据的页面上。

Answer 2

Javascript代码不能被PHP直接触发，因为PHP运行在服务器上，而Javascript运行在客户端(如浏览器)。所以我们需要的是一种告诉浏览器执行代码的方法。

你可以做的是将<script>包含在你在PHP中构建的字符串

'<script type="text/javascript">
$("#btn").click(function() {
    $("#modelWindow").modal("show");
    });
</script>'

如果jQuery和Bootstrap的Javascript在插入到DOM中时已经被加载，按钮点击将会工作。如果这对你不起作用，试着把它改成:

'<script type="text/javascript">
   window.onload = function(){
      $("#btn").click(function() {
          $("#modelWindow").modal("show");
          });
   }
</script>'

将代码放在window.onload中可以保证浏览器只在加载了所有外部脚本之后才运行它。来自Mozilla开发者网络:

load事件在文档加载过程结束时触发。在此时，文档中的所有对象都在DOM中图片、脚本、链接和子框架加载完成。

Answer 3

有很多方法可以触发模态如果你想在onclick上打开一个模态甚至你可以使用像这样的东西

echo '<button onclick="$('#showmymodal').modal('show')">click to open modal</button>';

如果你想在PHP函数中这样做，使用this，它会在调用时自动触发模态!

echo "<script>$('#showmymodalnow').modal('show')</script>";

我个人喜欢直接从HTML中使用onclick事件，像这样

<button onclick="$('#showmymodal').modal('show')">click to open modal</button>

我希望这能帮助到一些人