zoukankan      html  css  js  c++  java
  • 自定义alert框

    <script>
    
             function alerts(data, callback) { //回调函数
                 var alert_bg = document.createElement('div');
                 alert_box = document.createElement('div'),
                     alert_text = document.createElement('div'),
                     alert_btn = document.createElement('div'),
                     textNode = document.createTextNode(data ? data : ''),
                     btnText = document.createTextNode('确 定');
    
                 // 控制样式
                 css(alert_bg, {
                     'position': 'fixed',
                     'top': '0',
                     'left': '0',
                     'right': '0',
                     'bottom': '0',
                     'background-color': 'rgba(0, 0, 0, 0.1)',
                     'z-index': '999999999'
                 });
    
                 css(alert_box, {
                     'width': '540px',
                     'max-width': '90%',
                     'font-size': '23px',
                     'text-align': 'center',
                     'background-color': '#fff',
                     'border-radius': '15px',
                     'position': 'absolute',
                     'top': '50%',
                     'left': '50%',
                     'transform': 'translate(-50%, -50%)'
                 });
    
                 css(alert_text, {
                     'padding': '10px 15px',
                     'border-bottom': '1px solid #ddd'
                 });
    
                 css(alert_btn, {
                     'padding': '10px 0',
                     'color': '#007aff',
                     'font-weight': '600',
                     'cursor': 'pointer'
                 });
    
                 // 内部结构套入
                 alert_text.appendChild(textNode);
                 alert_btn.appendChild(btnText);
                 alert_box.appendChild(alert_text);
                 alert_box.appendChild(alert_btn);
                 alert_bg.appendChild(alert_box);
    
                 // 整体显示到页面内
                 document.getElementsByTagName('body')[0].appendChild(alert_bg);
    
                 // 确定绑定点击事件删除标签
                 alert_btn.onclick = function() {
                     window.location.reload();
                     alert_bg.parentNode.removeChild(alert_bg);
                     if (typeof callback === 'function') {
                         callback(); //回调
                     }
                 }
             }
    
             function css(targetObj, cssObj) {
                 var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
                 for (var i in cssObj) {
                     str += i + ':' + cssObj[i] + ';';
                 }
                 targetObj.style.cssText = str;
             }
    
    
         </script>
    

      

  • 相关阅读:
    c标签页面进行解析json
    Android 简述touch事件中的MotionEvent
    R中读取文件,找不到路径问题 No such file or directory
    文章标题
    Codeforces Beta Round #2 C. Commentator problem
    openfire 开发遇到的些问题
    BZOJ 刷题记录 PART 5
    公司又裁人了……
    最简单的基于FFmpeg的移动端样例:Android 视频转码器
    单片机: 简易计算器的实现(键盘)
  • 原文地址:https://www.cnblogs.com/qinyios/p/12108384.html
Copyright © 2011-2022 走看看