html+alert+内容修改,alertPopShow.html

组件 - 切版移动css框架

logo.png

alertPopShow.JS

适用于移动端的js弹出框架

toast
alert
confirm
confirm+input

$(function(){

$('#demo1').on('click', function(){

webToast("恭喜您,修改成功恭喜您,修改成功恭喜您修改成功恭喜您","middle",3000);

});

$('#demo2').on('click', function(){

popTipShow.alert('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等', ['知道了'],

function(e){

//callback 处理按钮事件

var button = $(e.target).attr('class');

if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide();

}

}

);

});

$('#demo3').on('click', function(){

popTipShow.confirm('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等',['确 定','取 消'],

function(e){

//callback 处理按钮事件

var button = $(e.target).attr('class');

if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("操作成功","top", 2000);

}, 300);

}

if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000);

}, 300);

}

}

);

});

$('#demo4').on('click', function(){

var html = "姓名:";

popTipShow.confirm('弹窗标题',html,['确 定','取 消'],

function(e){

//callback 处理按钮事件

var button = $(e.target).attr('class');

if(button == 'ok'){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空!","bottom", 3000);

return;

}

this.hide();

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000);

}, 300);

//按下确定按钮执行的操作

//todo ....

}

if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide();

setTimeout(function() {

webToast("您选择“取消”了","top", 2000);

}, 300);

}

}

);

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当弹出框出现时,可以通过设置一个半透明的背景覆盖在页面上,从而实现将页面置灰的效果。具体的实现方式可以通过以下步骤来完成: 1. 在弹出框出现时,动态创建一个遮罩层,并将其添加到页面中。 2. 设置遮罩层的样式,包括宽度、高度、背景颜色和透明度等属性。 3. 将弹框添加到遮罩层中,并设置其样式。 4. 当弹框关闭时,移除遮罩层。 以下是一个示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹框示例</title> <style> /* 遮罩层样式 */ .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } /* 弹框样式 */ .dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; z-index: 10000; } </style> </head> <body> <button onclick="showDialog()">打开弹框</button> <script> function showDialog() { // 创建遮罩层 var mask = document.createElement('div'); mask.className = 'mask'; // 创建弹框 var dialog = document.createElement('div'); dialog.className = 'dialog'; dialog.innerHTML = '这是一个弹框'; // 将弹框添加到遮罩层中 mask.appendChild(dialog); // 将遮罩层添加到页面中 document.body.appendChild(mask); // 关闭弹框时移除遮罩层 dialog.onclick = function() { mask.parentNode.removeChild(mask); }; } </script> </body> </html> ``` 在上面的示例中,当点击“打开弹框”按钮时,会出现一个带有遮罩层的弹框。当点击弹框时,遮罩层会被移除。你可以根据实际需求修改样式和代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值