Question

我需要你的帮助。我有一个按钮，它被PHP文件回显到HTML文件。点击按钮后我想要一个模态显示在{ {1}} file.Does有谁知道如何才能使这项工作？

PHP echo：

HTML

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

触发模态的脚本：

'<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>'

我是否需要将脚本添加到外部文件并在php中调用它或者还有其他方法可以执行此操作？谢谢

Answer 1

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

Answer 2

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

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

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

如果在插入DOM时已经加载了jQuery和Bootstrap的Javascript，则按钮单击将起作用。如果这对您不起作用，请尝试将其更改为：

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

将代码放在window.onload中可确保浏览器仅在加载所有外部脚本后运行它。来自Mozilla Developers Network：

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

Answer 3

即使您可以使用类似

的方法，也可以通过多种方式触发模式，即使您要在onclick上打开模式

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

如果您想在php函数上使用它，请使用它，它在被调用时会自动触发模式！

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

我个人喜欢直接使用HTML这样的onclick事件

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

我希望这对某人有帮助

当PHP回显生成时打开模态onclick按钮

3 个答案: