前端 自定义确认提示框
程序员文章站
2022-06-27 22:38:37
js默认提示框 js有三种默认提示框 提示框 alert('hello world!'); 确认框 var result=confirm('确认删除XX文件?');result为bool类型 回复确认框 var result=prompt('请输入文件标题:');result返回输入的值 自定义提示 ......
js默认提示框
js有三种默认提示框
提示框 alert('hello world!');
确认框 var result=confirm('确认删除xx文件?');result为bool类型
回复确认框 var result=prompt('请输入文件标题:');result返回输入的值
自定义提示框
下文通过js自动生成一个自定义提示框
function showdialog(content) { var layer = document.createelement("div"); layer.id = "layer"; var style = { background: "#ccc", position: "absolute", zindex: 10, width: "auto", height: "40px", left: "50%", top: "0%", marginleft: "-100px", margintop: "10px", padding: "4px 10px" } for (var i in style) { layer.style[i] = style[i]; } if (document.getelementbyid("layer") == null) { document.body.appendchild(layer); layer.innerhtml = content; layer.style.textalign = "center"; layer.style.lineheight = "40px"; settimeout("document.body.removechild(layer)", 3000) } }
效果如下:
自定义确认框
下文提供一个自定义提示框的案例,通过另一种方案(样式设置)来实现:
1 <div class="confirmwindow" id="confirmwindow"> 2 <div class="body"> 3 <div class="content">确认要删除xx文件么?</div> 4 <div class="btns"> 5 <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onclick="cancelonclick()">取消</a> 6 <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onclick="okonclick()">确认</a> 7 </div> 8 </div> 9 </div>
通过js设置元素的display属性,来控制提示框的显示隐藏
document.getelementbyid("confirmwindow").style.display = "inline";
document.getelementbyid("confirmwindow").style.display = "none";
效果如下:
效果如下:
以上demo,完整案例请下载:example-myconfirmdialog
或者访问github地址:https://github.com/kybs0/kybs0htmlcssjsdemo/tree/master/definedalertwindow
参考文章:
- html隐藏方式
- flex布局
- 获取元素
推荐阅读
-
Android仿IOS自定义AlertDialog提示框
-
Android 自定义一套 Dialog通用提示框 (代码库)
-
可自定义箭头样式的CSS3气泡提示框
-
在 Angular2 中实现自定义校验指令(确认密码)的方法
-
微信小程序前端自定义分享的实现方法
-
Laravel Validator自定义错误返回提示消息并在前端展示
-
C#NPOI.RabbitMQ.EF.Attribute.HttpRuntime.Cache.AD域.List
根据指定字段去重.前端JQuery.Cache.I18N(多语言).data-xx(自定义属性) -
微信小程序 自定义消息提示框
-
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
-
Android仿IOS自定义AlertDialog提示框