如何设置模态显示基于按钮单击的东西?

时间:2016-06-28 19:28:07

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

我真的希望我的模态根据我按下的按钮显示某些内容,但我不知道如何执行此操作。 实际上我试图使用if(isset($_POST['buttoname'])

但看起来这样不行Modal`

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

这是我试图使用的代码

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

1 个答案:

答案 0 :(得分:0)

您需要实际发布按钮单击以将其存储在$ _POST中。因此,只需将表单操作保留为空,它就会将此表单发布到您已经存在的URL中。

但这会刷新页面,所以如果你想在不刷新的情况下进行刷新,你需要使用javascript。

例如,如果您正在使用jquery,那么如果您使用的是bootstrap 在你的html中放置一些占位符div而不是这个php if:

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

在你的javascript代码中:

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