模态窗口外部页面

时间:2016-05-14 08:53:02

标签: php jquery html modal-dialog

模态窗口不显示 这是代码

//index.php
<script type="text/javascript">
    $(document).ready(function(){
        $('#tambahpeg').click(function(){
            $('<div>').load('pages/pegawai/tambahpeg.php').dialog();
        });
    });
</script>
<body>
<button id="tambahpeg">
</body>

这里是tambahpeg.php作为模态窗口内容

            <form>
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname" /><br>

    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" id="lastname" />

    <input type="submit" name="submit"/>
</form>

1 个答案:

答案 0 :(得分:0)

尝试这样的事情可以帮到你。 jquery load()方法将在解析页面之前加载内容。所以我尝试过 $。get()你也可以使用 load()

<body>
     <a href="#your_modal_id" data-toggle="modal" class="call_modal">Modal Load</a>

     <div class="modal fade" id="your_modal_id">
            <!-- your modal dialog styles and content -->
            <div class="modal-body">
           </div>
     </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
$(document).ready(function()
{
    $(document).on('click','.call_modal',function(evt)
    {
        evt.preventDefault();

        var url = "pages/pegawai/tambahpeg.php"; 
        $('#your_modal_id').modal({
                            remote:$.get(url,function(response)
                            {
                                var hold = $(response);
                                $('#your_modal_id').find('.modal-body').empty().append(hold);
                            })
                          });
     });
});