JQuery怎么实现一个自定义弹出对话框
导读：在实际案例的操作过程中，我们可能会遇到“JQuery怎么实现一个自定义弹出对话框”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧...
在实际案例的操作过程中，我们可能会遇到“JQuery怎么实现一个自定义弹出对话框”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。写一个简单的基于jquery的对话框，可以封装之后放到自己的项目里面，下面直接给出css代码和js代码，以及html代码
css:
#dialog
{
border:solid 1px #CCC;
width:300px;
height:150px;
background-color:#e5e5e5;
position:fixed;
}
.title
{
width:100%;
height:30px;
background:#dadada;
color:#a68687;
font-size:22px;
}
#TContent
{
line-height:35px;
margin-left:5px;
}
.content
{
height:80px;
width:100%;
text-align:center;
}
#CContent
{
line-height:25px;
font-size:16px;
}
.buttons
{
width:100%;
text-align:center;
}
#TTButton1,#TTButton2
{
cursor:pointer;
width:60px;
height:30px;
margin:0 5px 0 5px;
border:0 none;
color:White;
}
js:
$.extend({
confirms: function (options) {
var defaults = {
title: "Delete Confirmation",
message: "You are about to delete this item. br />
It cannot be restored at a later time! Continue?",
buttons: {
"Yes": {
´class´: ´blue´, ´action´: function () {
alert("你点击了Yes");
}
}
,
"No": {
´class´: ´gray´, ´action´: function () {
$("#dialog").remove();
}
}
}
}
;
var opts = $.extend(defaults, options);
$("div id=´dialog´>
div class=´title´>
span id=´TContent´>
" defaults.title
"/span>
/div>
div class=´content´>
span id=CContent>
" defaults.message
"/span>
/div>
div class=´buttons´>
input id=´TTButton1´ style=´background-color:"
defaults.buttons[´Yes´][´class´] "´ type=´button´ value=´Yes´ />
input id=´TTButton2´ type=´button´ style=´background-color:"
defaults.buttons[´No´][´class´] "´ value=´No´ />
/div>
/div>
").appendTo("body");
$("#TTButton1").bind("click", defaults.buttons[´Yes´][´action´]);
$("#TTButton2").bind("click", defaults.buttons[´No´][´action´]);
$("#dialog").css("top", ($(document).height() - $("#dialog").height()) / 2 - 100);
$("#dialog").css("left", ($(document).width() - $("#dialog").width()) / 2);
}
}
);
function test() {
$.confirms({
title: "测试",
message: "这是一个测试对话框！",
buttons:{
"Yes":{
´class´:´red´,´action´:function () {
alert("你对cx说：真2！");
}
}
,
"No": {
´class´: ´gray´, ´action´: function () {
$("#dialog").remove();
}
}
}
}
);
}
html测试代码：
input id="Button1" type="button" value="button" onclick="test();
" />
简简单单，完成咯，遇到的问题：$("123").appendTo("p"); 无效 $("b> 123/b> ").appendTo("p"); 就可以 不知什么原因
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
以上就是关于“JQuery怎么实现一个自定义弹出对话框”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注网络，小编每天都会为大家更新不同的知识。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JQuery怎么实现一个自定义弹出对话框
本文地址： https://pptw.com/jishu/654892.html