如何从PHP调用Bootstrap Modal?

时间:2015-08-30 15:54:00

标签: javascript php twitter-bootstrap

快速提问。如何从PHP调用Bootstrap模式?我有一个表单,当发生一些错误时,我想向用户显示一个警告模式。我尝试过其他主题的许多解决方案,但都没有效果。

这是我上次尝试的内容:

echo '<script type="text/javascript">';
echo '$(\'#alertDuplicate\').modal(\'show\')';
echo '</script>';

这是模态:

<!-- Modal Alert Duplicate -->
    <div class="modal fade" id="alertDuplicate">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Erro</h4>
                </div>
                <div class="modal-body">
                    <p>Essa função já existe!</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

2 个答案:

答案 0 :(得分:0)

尝试将其放入文档就绪函数中:

echo '<script type="text/javascript">';
echo '$(document).ready(function() {';
echo '$("#alertDuplicate").modal("show");';
echo '});';
echo '</script>';

答案 1 :(得分:0)

您可以使用下面的示例,也可以使用ajax从php脚本中调用并返回响应。

echo <<<EOT
<script type="text/javascript">
$(document).ready(function() {
    $('#alertDuplicate').modal('show');
});
</script>
EOT;

AJAX示例

使用ajax,您可以使用以下内容:

<script type="text/javascript">
$(document).ready(function () {
    $("input#submit").click(function(){
        $.ajax({
            type: "POST",
            url: "YOUR_PHP_FILE.php",
            data: $('form.FORM_NAME').serialize(),
            success: function(msg){
                $("#alertDuplicate").modal('hide');
            },
            error: function(){
                $("#alertDuplicate").modal('show');
            }
        });
    });
});
</script>

(您必须根据需要更改“FORM_NAME”和“YOUR_PHP_FILE”字样)