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属性,来控制提示框的显示隐藏
以上demo,完整案例请下载:example-myconfirmdialog
或者访问github地址:https://github.com/kybs0/kybs0htmlcssjsdemo/tree/master/definedalertwindow
如对本文有疑问, 点击进行留言回复!!
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论