I have problem with reveal modal from zurb-foundation.
the modal dialog doesn't disappear after I click the submit button .
so it stays open after clicking the submit, and there's no way to close it unless if I refresh the page.
This's the 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">×</span>
</button>
</div>
Jquery/ajax code to insert into the database.
$(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>
Picture of the problem http://s32.postimg.org/yqbuz1rvp/wewewewe.png. after I submit the form!