轻量级弹框 (修改后)

这个是某一天随便找的, 找了哪个前辈的(我也忘了 实在不好意思),后来改动了下 得到自己想要的

效果图:

<!DOCTYPE html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="./xcConfirm.css">
    <script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="./xcConfirm.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
    </style>
    <script type="text/javascript">
        $(function(){
            $("#btn7").click(function(){
                var txt=  ‘<form action="" id="form2"><p style="height: 35px;font-size:12px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;<font style="color:red;">*</font>&nbsp;用户名：</span> <input type="text" id="username" name="username" placeholder="填写您的姓名" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span>&nbsp;&nbsp;&nbsp;&nbsp;<font style="color:red">*</font>&nbsp;手机号：</span> <input type="text" id="phone" name="tel" placeholder="填写您的手机号" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span>&nbsp;&nbsp;&nbsp;公司名称：&nbsp;</span><input type="text" id="gsname" name="gsname" placeholder="填写您的公司名称" style="padding-left:5px;" /></p><p style="height: 35px;font-size:12px; margin:10px 0 0 0"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font style="color:red">*</font>&nbsp;邮箱：&nbsp;</span><input type="text"  id="email" name="email" placeholder="填写您的邮箱" style="padding-left:5px;" /></p></form>‘;
                var option = {
                    title: "首次体验，请先注册",
                    btn: parseInt("0011",2),
                    onOk: function(){
                        // 你的操作
                    }
                }
                window.wxc.xcConfirm(txt, "custom", option);
            });

        });

    </script>
</head>
<body>
<div class="" style="height: 768px;">
    <div class="sgBtn" id="btn7">弹窗ABC</div>
</div>

</body></html>

css

verticalAlign{vertical-align:middle;display:inline-block;height:100%;margin-left:-1px}
.xcConfirm .xc_layer{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#666;opacity:.5;z-index:2147000000}
.xcConfirm .popBox{position:fixed;left:50%;top:50%;background-color:#fff;z-index:2147000001;width:455px;height:340px;margin-left:-285px;margin-top:-150px;border-radius:5px;font-weight:200;color:#535e66}
.xcConfirm .popBox .ttBox{height:30px;line-height:30px;padding:14px 30px;border-bottom:solid 1px #eef0f1；}
.xcConfirm .popBox .ttBox .tt{font-size:18px;display:block;float:left;height:30px;position:relative;font-weight:500}
.xcConfirm .popBox .ttBox .clsBtn{display:block;cursor:pointer;width:12px;height:12px;position:absolute;top:22px;right:30px;background:url(../img/icons.png) -48px -96px no-repeat}
.xcConfirm .popBox .txtBox{margin:30px 40px 0px 30px;height:187px;width:390px;overflow:hidden;border:1px solid #EEF0F1;border-radius: 5px;}
.xcConfirm .popBox .txtBox .bigIcon{float:left;margin-right:20px;width:48px;height:48px;background-image:url(../img/icons.png);background-repeat:no-repeat;background-position:48px 0}
.xcConfirm .popBox .txtBox p{height:350px;margin-top:2px;line-height:26px;}
/*overflow-x:hidden;*/
.xcConfirm .popBox .txtBox p input{width:285px;height:30px;border:solid 1px #eef0f1;font-size:12px;margin-top:6px;color:#8e8e8e}
/*.xcConfirm .popBox .btnArea{border-top:solid 1px #eef0f1}*/
.xcConfirm .popBox .btnGroup{float:right}
.xcConfirm .popBox .btnGroup .sgBtn{margin-top:14px;margin-right:10px}
.xcConfirm .popBox .sgBtn{display:block;cursor:pointer;float:left;width:95px;height:35px;line-height:35px;text-align:center;color:#fff;border-radius:5px}
.xcConfirm .popBox .sgBtn.ok{background-color:#0095d9;color:#fff;position:relative;left:-120px;font-weight:700}
.xcConfirm .popBox .sgBtn.cancel{background-color:#546a79;color:#fff;position:relative;left:-120px;font-weight:700}
#tip-tel{font-size:11px;line-height: 16px; margin-top:2px;margin-left:2px;font-family: Microsoft YaHei; font-weight:500}

js

(function($){window.wxc=window.wxc||{};window.wxc.xcConfirm=function(popHtml,type,options){
    var btnType=window.wxc.xcConfirm.btnEnum;
    var eventType=window.wxc.xcConfirm.eventEnum;
    var popType={info:{title:"信息",icon:"0 0",btn:btnType.ok},success:{title:"成功",icon:"0 -48px",btn:btnType.ok},error:{title:"错误",icon:"-48px -48px",btn:btnType.ok},confirm:{title:"提示",icon:"-48px 0",btn:btnType.okcancel},warning:{title:"警告",icon:"0 -96px",btn:btnType.okcancel},input:{title:"输入",icon:"",btn:btnType.ok},custom:{title:"",icon:"",btn:btnType.ok}};
    var itype=type?type instanceof Object?type:popType[type]||{}:{};
    var config=$.extend(true,{title:"",icon:"",btn:btnType.ok,onOk:$.noop,onCancel:$.noop,onClose:$.noop},itype,options);
    var $txt=$("<p>").html(popHtml);
    var $tt=$("<span>").addClass("tt").text(config.title);
    var icon=config.icon;
    var $icon=icon?$("<div>").addClass("bigIcon").css("backgroundPosition",icon):"";
    var btn=config.btn;
    var popId=creatPopId();
    var $box=$("<div>").addClass("xcConfirm");
    var $layer=$("<div>").addClass("xc_layer");
    var $popBox=$("<div>").addClass("popBox");
    var $ttBox=$("<div>").addClass("ttBox");
    var $txtBox=$("<div>").addClass("txtBox");
    var $btnArea=$("<div>").addClass("btnArea");
    var $ok=$("<a>").addClass("sgBtn").addClass("ok").text("马上体验");
    var $cancel=$("<a>").addClass("sgBtn").addClass("cancel").text("取消");
    var $input=$("<input>").addClass("inputBox");
    var $clsBtn=$("<a>").addClass("clsBtn");
    var btns={ok:$ok,cancel:$cancel};init();
    var abc=‘<br/><div id="tip-tel">为了我们能更好的服务您，请您填写以下信息，注册如遇问题，请您拨打免费服务热线：025-52617173/52617319</div>‘; $(".ttBox").append(abc);
    function init(){
        if(popType["input"]===itype){
            $txt.append($input);
        }
        creatDom();bind();
    }

    function creatDom(){$popBox.append($ttBox.append($clsBtn).append($tt)).append($txtBox.append($icon).append($txt)).append($btnArea.append(creatBtnGroup(btn)));$box.attr("id",popId).append($layer).append($popBox);$("body").append($box);}
    function bind(){
        $ok.click(doOk);
        $(window).bind("keydown",function(e){if(e.keyCode==13){if($("#"+popId).length==1){doOk();}}});$cancel.click(doCancel);$clsBtn.click(doClose);
    }
    function doOk(){  //点击确认就会关闭 以下做input框内容判断 防止点击 弹框就关闭
        var $o=$(this);
        var tel = $("#phone").val();
        var username = $("#username").val();
        var gsname = $("#gsname").val();
        var email = $("#email").val();
        if(tel== ‘‘ || username == ‘‘ || email == ‘‘){
            alert("必填项不可为空");
            return false;
        }

        if(!checkPhone(tel)){
            alert("请填写正确手机号码");
            return false;
        }

        if(!checkEml(email)){
            alert("请填写正确邮件地址");
            return false;
        }
        config.onOk();$("#"+popId).remove();config.onClose(eventType.ok);//关闭弹框
    }

    function doCancel(){;var $o=$(this);config.onCancel();$("#"+popId).remove();config.onClose(eventType.cancel);}

    function doClose(){$("#"+popId).remove();config.onClose(eventType.close);$(window).unbind("keydown");}

    function creatBtnGroup(tp){var $bgp=$("<div>").addClass("btnGroup");$.each(btns,function(i,n){if(btnType[i]==(tp&btnType[i])){$bgp.append(n);}});return $bgp;}
    function creatPopId(){var i="pop_"+(new Date()).getTime()+parseInt(Math.random()*100000);if($("#"+i).length>0){return creatPopId();}else{return i;}}};window.wxc.xcConfirm.btnEnum={ok:parseInt("0001",2),cancel:parseInt("0010",2),okcancel:parseInt("0011",2)};window.wxc.xcConfirm.eventEnum={ok:1,cancel:2,close:3};window.wxc.xcConfirm.typeEnum={info:"info",success:"success",error:"error",confirm:"confirm",warning:"warning",input:"input",custom:"custom"};  })(jQuery);

别忘记 还有jquery 在之前引入

原文地址：https://www.cnblogs.com/G921123/p/10330752.html

时间： 2024-10-03 15:48:33

轻量级弹框 (修改后)的相关文章

WinForm 弹框确认后执行

if (MessageBox.Show("你确定要退出程序吗?", "确认", MessageBoxButtons.OKCancel, MessageBoxIcon.Question, MessageBoxDefaultButton.Button2) == DialogResult.OK) { //... }

案例 修改密码 弹框样式

弹框修改密码 <template> <div> <el-button type="text" @click="outerVisible = true">修改密码</el-button> <el-dialog title="修改密码" :visible.sync="outerVisible" style="width:1000px; margin:0 auto&qu

MVC 控制器弹框

第一种弹框成功后要刷新界面 [HttpPost] public ActionResult Add(Maticsoft.Model.Project.ProjectMoneyPlan model) { model.Money = new Maticsoft.Model.Struct.DRMB(model.Money).ToDouble().ToString(); Maticsoft.BLL.User.LoginUser login = new Maticsoft.BLL.User.LoginUser

boostrap弹框之BootstrapDialog

function dialogInit(){ var $html = $('<div><ul><li><span>这是弹框里面的内容</span></li></ul></div>') var dialog = new BootstrapDialog({ title: '弹框标题', message: $html,//弹框中间的内容 buttons: [{ label: '取消', action: functio

通过js批量提交后弹框

在一个报表页面有批量操作功能,选择任意条数据后点击审核按钮,弹出审核意见填写页面,填写完成后提交,代码: function approveListProgram() { var ids = ""; //获取所有已选择的复选按钮的id,拼接成字符串ids $('.frog-table', NavTab.getCurrentPanel()).find( 'tbody input[type="checkbox"]').each(function() { if ($(thi

js弹框3秒后自动消失

开发中有时候会需要最出弹框后,过几秒自动消失的效果,下面给大家分享一下我自己做的一个小案例. 案例中的弹框使用的是bootstrap里面的模态框,实现自动消失则用的是js中的setInterval方法.该弹框使用了jquery-ui中的draggable方法,可拖动. 目录结构如下: 下面是案例代码: demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

WPF中PreviewMouseDownEvent的系统处理：TabItem的PreviewMouseDown 事件弹框后不切换的问题调查

?? 背景: UI中有一个TabControl, 包含2个TabItem,当切换到别的TabItem时可能弹框然后根据逻辑判断是否跳转过去. 然后我就做了这样一个demo: xaml: <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" xmln

IOS UIAlertController 弹框 (ios 9.0 后代替了UIAlertView弹框 和 UIActionSheet下弹框)

在IOS 9.0 后 苹果官方宣布不再或不推荐使用UIAlertView 和 UIActionSheet 由UIAlertController进行代替两者 用控制器将两者合二为一 很简单 方便 下面就是关于UIAlertView的常用方法 #import "RootViewController.h" @interface RootViewController () @end @implementation RootViewController - (void)viewDidLoad {

鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="