如何设置模式显示基于按钮单击的内容？答案

【问题标题】：How to set the modal shows something based on a button click?如何设置模式显示基于按钮单击的内容？
【发布时间】：2016-06-29 03:37:46
【问题描述】：

我真的希望我的 Modal 根据我按下的按钮显示一些东西，但我不知道如何做到这一点。其实我尝试使用if(isset($_POST['buttoname'])

但看起来这不起作用`

这是我的模态，我只想将内容放在右侧（白色），但实际上它不起作用。

这是我尝试使用的代码

<!-- Modal Settings -->
  <div class="modal fade" id="Settings" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">
          <button type="button" class="close" data-dismiss="modal" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">&times;</button>
          <h4 style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px"><span class="fa fa-gear"></span> Settings</h4>
        </div>
        <div class="modal-body">
            <div class="container">
        <div class="list-group col-sm-1">
        <form method="post" href="#">
        <button type="submit" name="Profile" href="#" class="list-group-item">First </button>
        <button type="submit" name="Logins" href="#" class="list-group-item">First </button>
        <button type="submit" name="Security" href="#" class="list-group-item">First </button>
        </form> 
        </div> <!-- List -->
        </div>
        <?php 
        if(isset($_POST['Profile'])){

        echo' <div class="container">
        <div class="col-sm-11">
        <p> This is a test</p>
        </div>
        </div>';

                                }





                                    ?>    


        </div>
        <div class="modal-footer" style="background-color: #f9f9f9;">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        </div>
      </div>

    </div>
  </div> 
  <!-- Modal Settings -->

【问题讨论】：

你应该使用 JavaScript，而不是 PHP。或者，您可以将 PHP 与 AJAX 技术结合使用。

标签： php html css twitter-bootstrap bootstrap-modal

【解决方案1】：

您需要实际发布按钮单击以将其存储在 $_POST 中。因此，只需将表单操作留空，它就会将此表单发布到您所在的网址。

但这会刷新页面，所以如果你想在不刷新的情况下制作它，你需要使用 javascript。

例如，如果您使用的是 jquery，而您使用的是 bootstrap 在你的 html 中放置一些占位符 div 而不是这个 php 如果：

</div> <!-- List -->
</div>
<div id="placeholder"></div>
</div>

在你的 javascript 代码中：

$("button[name='Profile']").click(function() {
    $("#placeholder").html("YOUR HTML CODE");
});

【讨论】：