jquery 如何弹出自定义对话框？

可以用jDialog插件实现，jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中、一般会美化 alert()；

成都创新互联公司主营桂东网站建设的网络公司,主营网站建设方案,成都App制作,桂东h5小程序定制开发搭建,桂东网站营销推广欢迎桂东等地区企业咨询

参考如下：

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

}

});

})

[img]

如何使用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写也比较简单

jQuery如何修改模态对话框的内容

head

meta charset="UTF-8"

titleTitle/title

style

.hidden{

display:none;

}

.modal{

position:fixed;

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -200px;

background-color: white;

z-index:10;

}

.shadow{

position:fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

opacity:0.5;

background-color:black;

z-index: 9;

}

/style

/head

body

input onclick="add()" type="button" value="添加"/

table border="1" width="200px " id="tb"

tr

td target="hostname"1.1.1.1/td

td target="port"80/td

td target="seq"1/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.2/td

td target="port"82/td

td target="seq"2/td

td

a id='i2' class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.3/td

td target="port"84/td

td target="seq"3/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

/table

div class="modal hidden"

div id="modal1"

input name="hostname" type="text"/

input name="port" type="text"/

input name="seq" type="text"/

/div

div

input type="button" value="取消"/

input type="button" value="确认" /

/div

/div

div class="shadow hidden"/div

script src="jquery-1.12.4.js"/script

script

function add() {

$('.modal,.shadow').removeClass('hidden');

$('.modal input[value="确认"]').off().on('click',function(){

//我的理解：

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

var tr = document.createElement('tr');

var td1 = document.createElement('td');

td1.innerHTML = hostname;

td1.setAttribute('target','hostname');

$(tr).append(td1);

// console.log(tr);

var td2 = document.createElement('td');

td2.innerHTML = port;

td2.setAttribute('target','port');

$(tr).append(td2);

var td3 = document.createElement('td');

td3.innerHTML = seq;

td3.setAttribute('target','seq');

$(tr).append(td3);

var td4 = document.createElement('td');

td4.innerHTML = 'a class="edit"编辑/a | a class="del"删除/a';

// $(td4).children('[class="edit"]').attr('onclick','func()'); // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){

$(tr).append(td4);

$('#tb').append(tr);

})

}

//点击edit

// $('table').delegate('a','click',function(){ 不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签

$('table').delegate('a','click',function(){

//点击编辑，出现模态框

$(this).css('color','red');

$('.modal,.shadow').removeClass('hidden');

var tds = $(this).parent().prevAll(); //this：有编辑的a标签；获取到同一个tr下的所有td

//将表格中的值输入到模态框

tds.each(function(){

var val = $(this).attr('target'); //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值

var txt = $(this).text();

$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中

})

$('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});

// var host = $(tds[1]).text(); //tds[1] 会变成dom对象

// var port = $(tds[0]).text();

//将选中编辑的对话框的元素放入到input中

// $("input[name='hostname']").val(host);

// $("input[name='port']").val(port);

//点击确认，将修改过得值重新赋值给表格

function confirm(self){

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

console.log(11111);

self.eq(0).text(seq); // eq(0) 对应的是seq

self.eq(1).text(port);

self.eq(2).text(hostname);

}

})

// 点击删除

// $('.del').click(function() {

// $(this).parent().parent().remove();

// })

//点击取消，去除input框中的内容

$('.modal input[value="取消"]').click(function(){

$(".modal input[type='text']").val("");

$('.modal,.shadow').addClass('hidden');

})

function func() {

//点击编辑，出现模态框

$('.modal,.shadow').removeClass('hidden');

}

/script

/body

/html

jquery easyui 中dialog怎么关闭对话框

1、首先下载EasyUI的组件包，然后导入到开发工具中并且在HTML页面导入jquery脚本。

2、接下来需要导入的easyui的脚本文件，如下图所示，一定先导入jquery后导入easyui。

3、然后需要导入的是easyui的样式文件，如下图所示，样式文件只需要easyui.css即可。

4、接下来还需要导入的是语言文件，不导入的话可能会导致一些组件是英文。

5、接下来在body中定义一个div，然后给它一个easyui-dialog的样式。

6、然后运行页面，就会在页面中看到一个dialog的弹出窗口了，就可以关闭对话框了。

新闻名称：jquery对话框,jquery确认取消对话框
转载注明：http://kswjz.com/article/dsopphg.html