Question

这是我在php文件上的按钮

<a class="btn btn-primary btn-md btnAdd" role="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add</a>

我有这个脚本文件，旨在打开模式而不在按钮上有数据目标，但它不起作用。如何才能单击按钮并显示模态而不具有属性data-target？

$(".btnAdd").click(function(){

        $.ajax({
            type: "POST",
            url: "process_branch.php",
            data: {},
            success: function(r){
                 $('.modal-content').html(r);
            return false;
            },
            dataType: "html"
        });

        $('#myModal').modal('show');
});

哦，这是我放置模态的地方。这也是另一个php文件。我正在尝试动态创建

<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
</div>

Answer 1

在下面的回答中，我在按钮点击时给出了模型弹出窗口。你必须将这2行切换到ajax成功函数内部。

  <a class="btn btn-primary btn-md btnAdd" role="button" data-toggle="modal" ><i class="fa fa-plus" aria-hidden="true"></i>&nbsp;Add</a>

<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">        
           <div class="modal-content" style="padding: 8px;">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <span class="popdata">
           </span>
           </div>
        </div>
</div>    

$(".btnAdd").click(function(){
        $.ajax({
            type: "POST",
            url: "process_branch.php",
            data: {},
            success: function(r){
                 // HERE YOU HAVE TO CUT AND PASTE THE LAST 2 LINES
            return false;
            },
            dataType: "html"
        });
        // THESE 2 LINES CUT AND PASTE INSIDE AJAX SUCCESS
        $('.modal-content .popdata').html('hai');
        $('#myModal').modal('show');
});

检查 Fiddle

显示模态而不使用数据目标但使用ajax

1 个答案: