转换jquery "click"用于PHP调用的代码

Converting jquery "click" code to be used for php calls

本文关键字:quot 调用 代码 PHP click jquery 转换 用于      更新时间:2023-09-26

我对jquery/javascript比较陌生,但我发现了很棒的代码(下面),允许使用情态。用户将点击一个类为"activate_modal"的超链接,这将在屏幕上打开一个模态。

它工作得很好,但我想采取相同的概念并将其应用于PHP调用。例如,如果在PHP验证表单提交时,有人没有提供必需的字段,它将调用激活一个模态。

这可能很简单,但是我想不出来!所有我想做的是有相同的动作发生,将发生,如果用户点击链接与"activate_modal"类..

如果有人能帮助我,我将非常感激!

谢谢!

<script type='text/javascript'>
$(document).ready(function(){
$('.activate_modal').click(function(){
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//vertical and horizontal centering of modal window(s)
/*we will use each function so if we have more then 1 
modal window we center them all*/
$('.modal_window').each(function(){
    //get the height and width of the modal
    var modal_height = $(this).outerHeight();
    var modal_width = $(this).outerWidth();
    //calculate top and left offset needed for centering
    <!--var top = (window_height-modal_height)/2;-->
    var top = 100;
    var left = (window_width-modal_width)/2;
    //apply new top and left css values 
    $(this).css({'top' : top , 'left' : left});
});
 //get the id of the modal window stored in the name of the activating element       
 var modal_id = $(this).attr('name');
 //use the function to show it
 show_modal(modal_id);
});
$('.close_modal').click(function(){
//use the function to close it
close_modal();
});
});
//THE FUNCTIONS
function close_modal(){
//hide the mask
$('#mask').fadeOut(500);
//hide modal window(s)
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});
//fade in the mask to opacity 0.8 
$('#mask').fadeTo(500,0.8);
 //show the modal window
$('#'+modal_id).fadeIn(500);
}

这里是一个超链接的例子:

<a class='activate_modal' name='mymodal' href='#'>click here!</a>

您可以使用jquery AJAX调用提交表单,然后在PHP上验证信息并发送错误消息。

的例子:

$('#submit_btn').on('click', function(e) {
// call ajax
$.ajax({
    url: URL_TO_YOUR_PHP_VALIDATION_SCRIPT,
    type: 'post',
    dataType: 'json',
    data: $('#formId').serialize(),
    beforeSend: function() {
        // show loader
    },
    success: function(result) {
        // check status
        if(result.status == 'OK') {
            // show success message
        }
        else {
            // show error message
            // trigger modal popup
            modal.activate(); // the same way you trigger your modal
        }
    }
});

});

相关文章: