html如何做⼩弹框,html⾃定义弹框效果
/**
* 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);
}
box shadow怎么设置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);
/
/ })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。