Detailed explanation of submission form ideas of artdialog pop-up box control in JS_javascript skills

artDialog is a dialog component written based on javascript. It has an exquisite interface and a friendly interface.

Foreword:

Adaptive content

artDialog's special UI framework can adapt to content changes. It can even adapt to content dynamically inserted by external programs, so you don't have to consider the message content size to use it. Its message container can even center or left-align text based on width—all natively in XHTML+CSS.

Complete interface

It has a complete interface and can be easily used with external programs. Such as asynchronously writing messages, controlling position, size, display and hiding, closing, etc.

Detailed experience

If you are not in the input state, it supports the Esc shortcut key to close; you can specify it to pop up near the element to make the operation more convenient; intelligently add focus to the button; the golden ratio is vertically centered; the large response area is specially optimized for touch screen devices such as iPads. ; Pre-caching skin images for faster response...

Cross-platform compatible

Compatible with: IE6+, Firefox, Chrome, Safari, Opera, iPad and other mobile devices. And IE6 can also support the static positioning (fixed), overlay drop-down control, and alpha channel png background of modern browsers.

Getting to the point:

artdialog is a good pop-up box control

I have been in contact with ArtDialog for a while, and I think it is pretty good to use and relatively lightweight. I prefer JavaScript plug-ins that are lightweight and have fast loading speed.

Its functions are also very good and complete. Compared with other pop-up plug-ins, this plug-in is not only still under maintenance, but also has fewer bugs and is very convenient to use. It is one of the more outstanding plug-ins in China.

The calling method is as follows:

//说明下面是一段通过artdialog弹出form表单，并通过ajaxform来提交的js（表单可以采用jquery validate验证控件来验证表单）
$(document).ready(function() {
var options = {
target: '#output2',
success: showResponse // post-submit callback
};
$('#myForm').ajaxForm(options);
var alt =null;
$("#addHname").click(function(){
alt=art.dialog({
title:'新增花名',
content: document.getElementById('g_cn'),
width:750,
button: [
{
name: '保存',
focus: true,
callback: function () {
$('#myForm').submit();
return false;
}
},
{
name: '关闭',
callback: function () {
}
}
]
});
});
function showResponse(data){
if(alt !=null){
alt.close();
}
if(data=='success'){
artDialog.alert('保存成功');
}else{
art.dialog.close();
artDialog.alert('保存失败');
}
}
});

The above is a detailed explanation of the submission form idea of ​​the artdialog pop-up box control in JS introduced by the editor. I hope it will be helpful to everyone!