转换jquery "click"用于PHP调用的代码
Converting jquery "click" code to be used for php calls
我对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
}
}
});
});
相关文章:
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- "访问控制允许起源”;通过javascript从http页面调用同一网站的httpsurl时出现问题
- 多个“;脚本调用"在SINGLE”内$(文档).ready()”;
- jQuery捕获"RangeError:超过了最大调用堆栈大小“;
- jQuery:使用.attr('href',")调用javascript
- 重复“;function(){}.调用(this)"在Uglified JS中
- 无法调用方法“”;getEditResponseUrl"当使用表单ID打开表单时,绑定到工作表的Google
- 要求JS 2.1.9引起“;最大调用堆栈"使用Grunt时出错
- Fine Uploader S3-无处安全调用异步“;setUploadSuccessParams()"
- 将对象设置为Backbone.js模型,而不必调用“;set()"在每一处房产上
- "堆叠外空间”;同时通过AJAX调用填充jsTree
- 得到"未捕获的类型错误:未定义的不是函数“;当试图从对象调用get()或set()时
- "TypeError:无法调用方法'匹配'未定义的“;Angular JS指令中的Morris
- Node.js服务器在没有调用“;end()"用于服务器发送的事件
- "无法调用方法'打开'未定义的“;使用indexedDB.open时出错
- jQuery获取"事件调用“;要素
- 为什么<车身负载=“;fn()">使用函数调用,但是window.onload=fn;使用处理程序函
- "访问控制允许原点不允许原点为null"使用jQuery调用web服务时出错
- 无法调用方法“”;setHtmlContent"在GAS中
- "与服务器的连接不成功”;尝试在WebView中调用javascript时