正文
对话框jquery,对话框删除了怎么恢复聊天记录
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jquery 如何弹出自定义对话框？
可以用jDialog插件实现，jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中、一般会美化 alert()；
参考如下：
center
button id="test1"alert方式调用/button
br/br/
button id="test2"confirm方式调用/button
br/br/
button id="test3"iframe方式调用/button
br/br/
button id="test4"只显示内容对话框/button
br/br/
button id="test5"对话框配置按钮/button
br/br/
button id="test6"message方式调用/button
br/br/
button id="test7"tip方式调用/button
/center
以下是JS代码
$("#test1").click(function(){
var dialog = jDialog.alert(´欢迎使用jDialog组件´,{},{
showShadow: false,// 不显示对话框阴影
buttonAlign : ´center´,
events : {
show : function(evt){
var dlg = evt.data.dialog;
},
close : function(evt){
var dlg = evt.data.dialog;
},
enterKey : function(evt){
alert(´enter key pressed!´);
},
escKey : function(evt){
alert(´esc key pressed!´);
evt.data.dialog.close();
}
}
});
}) ;
$("#test2").click(function(){
var dialog = jDialog.confirm(´欢迎使用jDialog组件，我是confirm！´,{
handler : function(button,dialog) {
alert(´你点击了确定！´);
dialog.close();
}
},{
handler : function(button,dialog) {
alert(´你点击了取消！´);
dialog.close();
}
});
});
$("#test3").click(function(){
// 通过options参数，控制iframe对话框
var dialog = jDialog.iframe(;,{
title : ´
width : 1100,
height : 550
});
});
$("#test4").click(function(){
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´
});
});
$("#test5").click(function(){
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´;,
buttons : [
{
type : ´highlight´,
text : ´你好´,
handler:function(button,dialog)
{
dialog.close();
}
}
]
});
});
$("#test6").click(function(){
var dialog = jDialog.message(´´,{
autoClose : 3000, // 3s后自动关闭
padding : ´30px´, // 设置内部padding
modal: true // 非模态，即不显示遮罩层
});
});
$("#test7").click(function(){
var dialog = jDialog.tip(´´,{
target : $(´#test7´),
position : ´left-top´,
trianglePosFromStart :0,
autoClose : 1000,
offset : {
top :-20,
left:10,
right:0,
bottom:0
}
});
})
相关问答
Q1: 如何调用jquery对话框？
confirm()方法就是对话框
$(function(){
$('div').click(function(){
if(confirm("你要弹出对话框嘛！")){
document.write("弹出对话框");
}
})
})
Q2: 如何利用jquery easyui设置对话框
1、实现对话框，首先新建一个jsp页面，去掉设置路径，保证js和css样式的路径的正确性
2、引入对话框所需要的js文件和css样式文件
3、
利用制作两个按钮
打开
关闭
4、
在中添加一个table
姓名：
性别：
年龄：
电话：
地址：
5、启动服务器，在...
Q3: 如何创建一个自定义的jQuery确认对话框
jquery插件有两种，一种是$('.xxx').xxx(); 另一种是$.xxx();
自定义jquery插件，我理解是插件的写法啦。如下面示例代码
// crud 是插件的名字，可以替换成别的
// 1
(function($, window, document, undefined){
$.fn.crud = function(options){
var opts = $.extend({}, $.fn.crud.defaults, options);
this.each(function(){
// 这里是这个插件实现方法主内容
});
};
$.fn.crud.defaults = {
// 插件的参数
};
}(jQuery, window, document));
// 调用方法 $('.xxx').crud({});
// 2
(function($, window, document, undefined){
$.fn.extend.crud = function(options){
var opts = $.extend({}, $.fn.extend.crud.defaults, options);
this.each(function(){
// 这里是这个插件实现方法主内容
});
};
$.fn.extend.crud.defaults = {
// 插件的参数
};
}(jQuery, window, document));
// 调用方法 $.crud({});
Q4: 如何使用jquery实现点击按钮弹出一个对话框
有很多方法实现的，比如使用alert这种比较丑的弹框，比如
btn.click(function(){
window.alert('内容')
})；
或者是自己自定义的弹框，那这样的话你至少得套三个div，比如
div-----这个绝对定位到整个页面，如position:absolute;top:0;left:0;right:0;bottom:0;
div-----这个在父级元素上面做绝对定位，也就是弹框的位置
div/div----弹框内容
/div
/div
或者是jQuery UI本身所附带的对话框功能，那个百度就出来了，不过不建议用那个，感觉比较丑，还是自己写一个好看
当然你也可以试着引入其他的UI框架，比如boot都有对话框的功能，不过建议自己写，用jQuery写也比较简单
