使用 ajax 单击提交后关闭显示模式对话框

Question

我对来自 zurb-foundation 的 reveal modal 有疑问。

单击提交按钮后模式对话框没有消失。

所以它在点击提交后保持打开状态，除非我刷新页面，否则无法关闭它。

这是显示模式

    <div class="insert_post" data-open="add_post">
     <i class="fa fa-plus" ></i>
 </div>

 <div class="small reveal" id="add_post" data-reveal-id="myModal" data-reveal >
<?php
     $output .='


         <div class="row">
             <div class="medium-6 columns">
                 <label>First name
                     <input type="text"  id="first_name" contenteditable>
                 </label>
             </div>
             <div class="medium-6 columns">
                 <label>Last name
                     <input type="text"  id="last_name" contenteditable>
                 </label>
             </div>
              <button type="button" name="btn_add" id="btn_add" class="button btn btn-xs btn-success" >Submit</button> 
         </div>






     ';
     echo $output; ?>
     <button class="close-button" data-close aria-label="Close modal" type="button">
         <span aria-hidden="true">&times;</span>
     </button>
 </div>

Jquery/ajax 插入数据库的代码。

$(document).ready(function(){
    function fetch_data()
    {
        $.ajax({
            url: "includes/home.php",
            method:"POST",
            success:function(data){
                $('#container').html(data);
            }
        });
    }
    fetch_data();
    $(document).on('click', '#btn_add', function(){
        var first_name = $('#first_name').val();
        var last_name = $('#last_name').val();

        $.ajax({
            //url:"includes/widgets/insert.php",
            method:"POST",
            data:{first_name:first_name, last_name:last_name},
            dataType:"text",
            success:function(data)
            {
                //alert(data);
                fetch_data();
            }
        })

    });

});
</script>

问题图片http://s32.postimg.org/yqbuz1rvp/wewewewe.png。在我提交表格后！

Answer 1

您可以在成功回调中JavaScript关闭模态

$("#add_post").foundation('close');

使用 ajax 单击提交后关闭显示模式对话框

close reveal modal dialog after clicking submit using ajax

css

php

ajax

jquery

zurb-foundation