2. 程式人生 > >javascript自定義alert彈窗

javascript自定義alert彈窗

阿新 • • 發佈：2019-02-10
window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shield.style.left = "50%"; shield.style.top = "50%"; shield.style.width = "280px"; shield.style.height = "150px"; shield.style.marginLeft = "-140px"
; shield.style.marginTop = "-110px"; shield.style.zIndex = "25"; var alertFram = document.createElement("DIV"); alertFram.id="alertFram"; alertFram.style.position = "absolute"; alertFram.style.width = "280px"; alertFram.style.height = "150px"; alertFram.style.left = "50%"
; alertFram.style.top = "50%"; alertFram.style.marginLeft = "-140px"; alertFram.style.marginTop = "-110px"; alertFram.style.textAlign = "center"; alertFram.style.lineHeight = "150px"; alertFram.style.zIndex = "300"; strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n"
; strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[自定義alert]</li>\n"; strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n"; strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"確 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n"; strHtml += "</ul>\n"; alertFram.innerHTML = strHtml; document.body.appendChild(alertFram); document.body.appendChild(shield); this.doOk = function(){ alertFram.style.display = "none"; shield.style.display = "none"; } alertFram.focus(); document.body.onselectstart = function(){return false;}; }

相關推薦

javascript自定義alert彈窗

window.alert = function(str) { var shield = document.createElement("DIV"); shield.id = "shield"; shield.style.position = "absolute"; shiel

自定義alert彈框

system div share ons title nbsp tof 接口 har 1 /**************** UIAlertControllerStyleAlert *************************/ 2 /*創建一個 可以自定義文字

微信小程序之自定義toast彈窗

pla cnblogs display pan false 返回 頁面 文件 src 微信小程序裏面的自帶彈窗icon只有兩種，success和loading。有時候用戶輸入錯誤的時候想加入一個提醒圖標，也可以使用wx.showToast中的image來添加圖片達到使用自定

微信小程式自定義分享彈窗

效果圖： 多種觸發條件使用同一個彈窗： *.js觸發處： this.setData({ isWrong:true, wrongtap:1, dialogWord:"wrong", wrongDec:"答案錯誤，是否向好友求助？" })  

自定義web彈窗/層：簡易風格的msg與可拖放的dialog

　　前言 　　做過web專案開發的人對layer彈層元件肯定不陌生，作為layUI的一個重要元件，使用簡單、介面引數豐富，功能健壯，深受廣大開發者的喜愛，作為一個熱（經）愛（常）工（劃）作（水），喜歡鑽研探索技術的程式設計師（狗），我們自己來實現一個web彈窗/層，一窺layer的本源（/手動滑稽臉），進步

Qt自定義按鈕彈窗控制元件

  一直以為做一個按鈕彈窗控制元件很簡單，可做起來發現並不是那麼順利，折騰了挺長時間的，先看下效果： 前言   嘗試過兩種方案，方案一：使用QToolButton控制元件，我們可以自定義一個widget，然後setMenu設定為該widget；方案二：點選一個

vue 小知識總結 ------ 自定義公共彈窗

1 新建彈窗元件檔案 selfToast.vue 主體內容： <!-- template --> <template>     <transition name="main-bg-fade">         <div class=

FlycoDialog 簡單實用的自定義Android彈窗對話方塊之Dialog篇

效果圖鎮樓 FlycoDialog是一款非常棒的彈窗對話方塊處理框架，今天在這裡主要講一下他的自定義彈出對話方塊的功能，這裡以第二幅效果圖為例，圖片已經放在部落格最下方，X號自己隨便找一個東西代替吧。 首先我們還是先新增依賴

簡單實現自定義Dialog彈窗

前言 這幾天都在學習Web端的技術點，對於Android這麼好玩的技術，那麼也不能丟落。時間擠一擠，說不定還能擠出一條溝，呵呵..這幾天看到小夥伴們在專案中在為dialog相關的問題不知所措，看了大概的需求，都涉及到自定義dialog，其實也蠻簡單的，在

Jquery實現自定義訊息彈窗

當覺得瀏覽器的alert彈框太難看時，就會想動手自行編輯彈框啦，首先在html頁面0的插入彈框div。 寫在body結束標籤前就行了。 <div id="cjy-maskBox"><

自定義Dialog彈窗及軟體盤的隱藏和顯示

1.佈局檔案<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

html5+css3+javascript 自定義彈出窗口

eight padding pro mage char round 技術分享 function 窗口 效果圖： 源碼： 　　1.demo.jsp 1 <%@ page contentType="text/html;charset=UTF-8" language=

javascript--自定義彈出登陸視窗（彈出窗）

web開發中瀏覽器物件封裝了諸如prompt、alert、confirm等彈出框，但是有的彈出框並不能滿足開發需要，需要我們自己定義彈出框，諸如使用者登陸框、訊息提示框等。本文利用彈出使用者登陸框示例，對這部分知識做個小結。 示例需求：點選按鈕，彈出登陸視窗，且該視窗可以拖拽，彈出視窗的同時，整個頁面變成灰

利用Javascript的 函式過載 實現自定義Alert樣式

{    document.write ('<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">');    document.write ('  <tr

vue3系列：vue3.0自定義全域性彈層V3Layer|vue3.x pc桌面端彈窗元件

基於Vue3.0開發PC桌面端自定義對話方塊元件V3Layer。 前兩天有分享一個vue3.0移動端彈出層元件，今天分享的是最新開發的vue3.0版pc端彈窗元件。 V3Layer 一款使用vue3.0開發的多功能PC網頁端自定義彈窗元件。擁有超過10+種彈窗型別、30+種引數配置，支援拖拽(自定義

bootstrap大氣alert彈窗組件：messenger

-s jpg 控件 主題 xtra erro 特意 window after 　　今天用到了這個alert控件，特意分享一下。地址是： 　　http://www.bootcss.com/p/messenger/ 　　使用方法裏面寫的很清楚，先把js和css兩個文件引入

javascript自定義事件

事件模型 java 鼠標 nbsp .com org .org spa detail javascript自定義事件 Javascript中的事件包括click、mouseover、submit、change等等，它們分別在元素被點擊、鼠標滑過、表單提交、域的

定時消失的Alert彈窗

elb true nim with forms selector select 類方法 -- 在公共類裏面寫如下兩個類方法就可以了，只需要把第一個類方法公布出來： 代碼如下： #pragma mark --- 定時彈窗 --- + (void)showAlertViewW

自定義 popWindow彈框 工具包

popu second db2 oca pri dial motion void float 　　前言：因為Android 沒有像IOS一樣的ActionSheet，雖然在github上看到有一些類似ActionSheet的庫，總覺得不好用，不如自己寫一個彈框通用類，樣式全

自定義Alert+自動關閉

view font element pointer hidden col 內容 url about <html><head> <style type="text/css"> #alertMsg {