弹出框美化 alert样式美化

引用style.css和ui.js就可以直接用以下接口调用!

alert_带标题:

mizhu.alert( 'alert_带标题' , '这是alert效果' );

 

alert_带图标:

mizhu.alert( '' , '这是alert效果' , 'alert_red' );

 

alert_带标题带图标:

mizhu.alert( 'alert_带标题带图标' , '这是alert效果' , 'alert_green' );

 

 alert_无标题无图标:

mizhu.alert( '' , '这是alert效果' );

 

confirm_无标题:

mizhu.confirm( '' , '是否要取消关注?' , function (flag) {
     if (flag) {
         mizhu.alert( '' , '取消成功' );
     }
});   

 

confirm_带标题:

mizhu.confirm( '' , '是否要取消关注?' , function (flag) {
     if (flag) {
         mizhu.alert( '温馨提醒' , '取消成功' );
     }
}); 


open:

mizhu.open(600, 400, '新浪微博' , 'http://weibo.com/yuanyuanforlove' );


toast_默认3秒消失:

mizhu.toast( '已取消关注' );

toast_自定义时间(6秒):

mizhu.toast( '已取消关注' , 6000);

 

下载Demo:

http://files.cnblogs.com/files/yuanxiaojian/alert.rar


本人参考了http://www.cnblogs.com/kewei/p/4423112.html 进行修改和美化,增加了一些自定义开关,后续会继续更新。

美化PHP弹出提示可以通过使用CSS样式和JavaScript脚本来实现。以下是一个简单的方法: 首先,创建一个HTML文档,并包含一个按钮,用于触发弹出提示。在按钮上添加一个JavaScript函数的点击事件,例如: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <button onclick="showAlert()">点击弹出提示</button> </body> </html> ``` 然后,创建一个CSS样式表(style.css),用于美化提示的外观,例如: ```css .alert { width: 200px; height: 100px; background-color: #f2f2f2; border: 1px solid #ccc; border-radius: 5px; text-align: center; line-height: 100px; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 接下来,创建一个JavaScript文件(script.js),编写showAlert函数,用于弹出提示,例如: ```javascript function showAlert() { var alertDiv = document.createElement("div"); alertDiv.className = "alert"; alertDiv.innerHTML = "这是一个美化的提示!"; document.body.appendChild(alertDiv); setTimeout(function(){ alertDiv.remove(); }, 2000); } ``` 在函数中,我们首先创建一个新的div元素,并设置其class为"alert",然后将提示的内容设置为"这是一个美化的提示!"。接着,将该div元素添加到文档的body元素中。setTimeout函数用于在指定时间后移除该提示。 最后,在同一目录下创建一个空的style.css和script.js文件,然后将以上代码粘贴到相应的文件中。运行HTML文件,点击按钮就能够看到一个美化的提示出现在屏幕上,提示会在2秒后自动关闭。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值