jquery overlay won't close
Hi I'm having an issue with using jquery overlays failing to close when my script has finished processing.
All I am doing is displaying a very simple form taking the values on submit processing them in the background and adding them to a page. Once this is done the overlay should close, however it just stays there, and won't go until I do a full page refresh.
My Jquery code looks like this:
function employmenthistory(){
$(document).ready(function(){
/**
* Modal Dialog Boxes Setup
*/
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.7
},
closeOnClick: false
});
/* User Input Prompt Modal Box */
$("#employmentprompt form").submit(function(e) {
// get user input
var name = $("#name", this).val();
var role = $('#role', this).val();
var title = $("#title", this).val();
//we need to know how many elements already exist
var elementCount = $('li.note').length;
//update server with information about this employment
$.ajax({
url: '/addempl/',
type : 'post',
data : "name=" + name + "&role=" + role + "&title=" + title + "&ec=" + elementCount,
dataType: "json",
success : function(msg){
//confirm the event was successful
if(msg.status == 'success'){
var item = msg.data;
//we now add to the ul for elements
$('ul.listing').append(item);
}else{
//failed to process so display error
$('div.message error').html('<p>We were unable to add your employment history</p><p>Please try again</p>');
}
},
error : function(err){
//failed to call server
$('div.message error').html('<p>We were unable to add your employment history</p><p>Please try again</p>');
}
});
// close the overlay
triggers.eq(0).overlay().close();
// do not submit the form
return e.preventDefault();
});
});
}
All aspects of this code works fine apart from when I get to
triggers.eq(0).overlay().close();
The overlay with the form in it remains on the page. There is only one modelInput element and form that开发者_运维技巧 can be called so I am not sure why this is failing.
All I've done is follow the example that can be found here:
http://flowplayer.org/tools/demos/overlay/modal-dialog.html
Any help with this would be gratefully received.
Thanks.
I think you need to use the api
argument in your overlay command. I don't see it on their example, but I recall that being my problem in the past.
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.7
},
closeOnClick: false,
api: true
});
Update
Here is a Working Demo showing the opening/closing of modal as well as opening one modal from another. Hope it helps.
This is the code I am currently using...
var currentModal;
function openModal(divName){
closeModal();
if ($('#' + divName).length>0){
currentModal=$('#'+divName).overlay({
mask: {color: '#000000'},
top:'0px',
api: true
}).load();
}
}
function closeModal(){
if (currentModal){
if (currentModal.isOpened){
currentModal.close();
}
}
}
精彩评论