html 自定义弹框效果

页面系统弹框往往不能满足我们的需求,多数需要自定义弹框。写了几个自定义弹框样式。
alertView.js

/**
 * Created by rayootech on 16/8/12.
 */
var containHtml;

/**
 * 带输入框的弹框
 */

$.fn.showInputAlert = function(callback){
    if(typeof(callback)=="function") {
        showInputView(callback);
    }
}


function showInputView(callback){
    if(containHtml)return;
    containHtml = '
'
; $(document).find("body").append(containHtml); $(".cover").css({background: "rgba(0,0,0,0.5)",position: "fixed", top: "0", left: "0", width: "100%",height: "100%"}); $("#tipView").css({position:"fixed","padding-bottom": "15px",left:"30px",right:"30px","border-radius":"8px", "box-shadow":"0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1)",bottom:"50%","margin-bottom":"-30px","background-color":"#fff","text-align":"center","z-index": "1000"}); $("#tv_title").css({"background-color":"#f3f3f3","border-top-left-radius":"8px","border-top-right-radius":"8px",height: "2.5em","line-height":"2.6em","text-align": "center","font-size": "16px"}); $("#tv_content").css({"margin":"10px 10px 15px 10px","height": "40px"}); $("#tv_content").find("input").css({display: "block",width: "calc(100% - 20px)",height: "100%","border": "0.5px solid lightgray","padding":" 0 10px 0 10px","font-size": "16px"}); $("#tv_sureBtn").css({"background-color": "#f44c48",color:"#fff",width:"100px","line-height":"35px","font-size":"14px","border-radius":"6px"}); showInput("提示",callback); $(".cover").bind("click",removeFromSuperDiv); $("#tipView").bind("click",function(event){ event.stopPropagation(); }); } function showInput(title,callback) { $("#tv_title").text(title); $("#tv_sureBtn").click(function () { if(callback){ var text= $("#tv_content").find("input").val(); callback(text); } removeFromSuperDiv(); }); } /** * 带按钮的弹框 */ $.fn.showAlert = function(content,callback,singleButton){ if(typeof(content)=="string"){ if(callback){ if(singleButton){ alert("内容加function两个按钮"); showDouble(content,callback); }else{ alert("内容加function一个按钮"); showSingle(content); } return; } showSingle(content); } } function showDouble(content,callback){ if(containHtml)return; containHtml = '
'
; $(document).find("body").append(containHtml); $(".cover").css({background: "rgba(0,0,0,0.5)",position: "fixed", top: "0", left: "0", width: "100%",height: "100%"}); $("#tipView").css({position:"fixed","padding-bottom": "15px",left:"30px",right:"30px","border-radius":"8px", "box-shadow":"0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1)",bottom:"50%","margin-bottom":"-30px","background-color":"#fff","text-align":"center","z-index": "1000"}); $("#tv_title").css({"background-color":"#f3f3f3","border-top-left-radius":"8px","border-top-right-radius":"8px",height: "2.5em","line-height":"2.6em","text-align": "center","font-size": "16px"}); $("#tv_content").css({"margin-top":"10px","margin-right": "20px","margin-left": "10px","font-size":"15px",margin:"10px 10px 0p", display:"-webkit-box","display":"-ms-flexbox",display:"-webkit-flex",display:"flex","-webkit-box-pack":"center","-ms-flex-pack":"center","-webkit-justify-content":"center","justify-content":"center","-webkit-box-align":"center","-ms-flex-align":"center","-webkit-align-items":"center","margin-bottom":"15px"}); $("#tv_cancleBtn").css({"background-color": "#f44c48",color:"#fff",width:"100px","line-height":"35px","font-size":"14px","border-radius":"6px","margin-right":"30px"}); $("#tv_sureBtn").css({"background-color": "#f44c48",color:"#fff",width:"80px","line-height":"35px","font-size":"14px","border-radius":"6px"}); showTips("提示",content,callback); $(".cover").bind("click",removeFromSuperDiv); $("#tipView").bind("click",function(event){ event.stopPropagation(); }); } function showSingle(content){ if(containHtml)return; containHtml = '
确定
'
; $(document).find("body").append(containHtml); $(".cover").css({background: "rgba(0,0,0,0.5)",position: "fixed", top: "0", left: "0", width: "100%",height: "100%"}); $("#tipView").css({position:"fixed","padding-bottom": "15px",left:"30px",right:"30px","border-radius":"8px", "box-shadow":"0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1), 0 0 10px 5px rgba(0, 0, 0, .1)",bottom:"50%","margin-bottom":"-30px","background-color":"#fff","text-align":"center","z-index": "1000"}); $("#tv_title").css({"background-color":"#f3f3f3","border-top-left-radius":"8px","border-top-right-radius":"8px",height: "2.5em","line-height":"2.6em","text-align": "center","font-size": "16px"}); $("#tv_content").css({"margin-top":"10px","margin-right": "20px","margin-left": "10px","font-size":"15px",margin:"10px 10px 0p", display:"-webkit-box","display":"-ms-flexbox",display:"-webkit-flex",display:"flex","-webkit-box-pack":"center","-ms-flex-pack":"center","-webkit-justify-content":"center","justify-content":"center","-webkit-box-align":"center","-ms-flex-align":"center","-webkit-align-items":"center","margin-bottom":"15px"}); $("#tv_sureBtn").css({"background-color": "#f44c48",color:"#fff",width:"100px","line-height":"35px","font-size":"14px","border-radius":"6px","margin": "0 auto"}); showTips("提示",content,null); $(".cover").bind("click",removeFromSuperDiv); $("#tipView").bind("click",function(event){ event.stopPropagation(); }); } function showTips(title,content,callback) { if(!content||content=="")return; $("#tv_title").text(title); $("#tv_content").text(content); $("#tv_sureBtn").click(function () { if(callback)callback(); removeFromSuperDiv(); }); $("#tv_cancleBtn").click(function () { removeFromSuperDiv(); }); } function removeFromSuperDiv(){ $(".cover").remove(); containHtml=null; } //$().showAlert("我很好的的哈哈哈",function(){ // alert("回来了"); // },true); // $().showInputAlert(function(text){ // alert(text); // })

调用方法


//$().showAlert("我很好的的哈哈哈",function(){
//  alert("回来了");
// },true);

// $().showInputAlert(function(text){
//   alert(text);
// })

效果图:
html 自定义弹框效果_第1张图片


html 自定义弹框效果_第2张图片


html 自定义弹框效果_第3张图片

你可能感兴趣的:(HTML基础)