js怎样实现自定义的弹出框

JavaScript014

js怎样实现自定义的弹出框,第1张

先用html和Css写一个框

然后给这个框加上可拖动效果

然后用js控制这个框的隐藏和显示

就行了

不过现在又很多插件,jquery的,还有其他自定义的,都很好用

自己写一个就是要花点时间

不用定义方法function,直接这样写

<script type="text/javascript">

if(confirm("确认?")){

location.href="a.jsp"

}else{

window.close()

}

</script>

那个a.jsp你可以随便改,想跳哪就跳哪。

给采纳呀哥们!

可以用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

}

})

})