精华内容
下载资源
问答
  • jQuery实现的各种不同样式弹出框

    千次阅读 2018-07-10 18:12:51
    本来做项目时,需要用到弹框提示用户出错,老师说,普通的alert样式不好看,提示中会有网站地址,因此通过查找网络找到了这几个样式,均来自网络,调试可用,(加载中需要图片)可以在http://www.xwcms.net/下载更...

    本来做项目时,需要用到弹框提示用户出错,老师说,普通的alert样式不好看,提示框中会有网站地址,因此通过查找网络找到了这几个样式,均来自网络,调试可用,(加载中需要图片)

    可以在http://www.xwcms.net/下载更多模板





    js代码

    /*! zdialog | (c) 2016 | by zcy */
    /**
     * FunL: 表示左侧按钮的触发事件      
     * 默认事件 关闭弹出层
     * **/
    ;(function($,window,document,undefined){
    		   //默认参数
    		    var PARAMS;
    		    var DEFAULTPARAMS = { Title: "标题", Content: "",BtnL:"确定",BtnR:"取消" , FunL: new Object, FunR: new Object };
    		    $.DialogByZ = {
    		        //弹出提示框
    		        Alert: function (params) {
    		            Show(params,"Alert");
    		        },
    		        //弹出确认框
    		        Confirm: function (params) { Show(params,"Confirm"); },
    		        //自动显示弹框
    		        Autofade: function (params) { Show(params,"Autofade") },
    		        //关闭弹出框
    		        Close: function () {
    		            $(".zbox-popup,.zbox-popup-backdrop").remove();
    		        },
    		        //加载图形
    		        Loading:function(Url){
    		        	loadBox(Url)
    		        }
    		
    		    };
    		        //初始化参数
    		    function Init(params) {
    		        if (params != undefined && params != null) {
    		            PARAMS = $.extend({},DEFAULTPARAMS, params);
    		        }
    		    };
    		    function loadBox(Url){
    		    	var url=Url;
    		    	var dislogContainer=$('<div class="zbox-popup" style="display: block;"><img  id="zchange" src="'+url+'"></div>');
    		    	var blackFilter=$('<div class="zbox-popup-backdrop" style="display: block;"></div>');
    		    	setTimeout(function(){
    		    	  		 $(".zbox-popup").addClass('zbox-popup-in');
    		    	  		 $(".zbox-popup-backdrop").addClass('zbox-active');
    		    	  	},30)
    		    	//$("body").append(blackFilter);
    		    	$("body").append(dislogContainer);
    		    }
    		    function Show(params, caller){
    		    	  Init(params);
    		    	  var dislogContainer;
    		    	  var dialogInner;
    		    	  var dialogBtn;
    		    	  var blackFilter=$('<div class="zbox-popup-backdrop" style="display: block;"></div>');
    		    	  if(caller=='Autofade'){
    		    	  	 dislogContainer=$('<div class="zbox-toast-container"><div class="zbox-toast-message">'
    		    	  	 +PARAMS.Content+'</div></div>');
    		    	  	 $("body").append(dislogContainer);
    		    	  	 setTimeout(function(){
    		    	  		 $(".zbox-toast-container").addClass('zbox-active');
    		    	  	},30)
    		    	  	 setTimeout(function(){
    		    	  	 	  $(".zbox-toast-container").remove();
    		    	  	 },3000)
    		    	  }else{
    		    	  	dislogContainer=$('<div class="zbox-popup" style="display: block;"></div>');
    		    	  	dialogInner=$('<div class="zbox-popup-inner"><div class="zbox-popup-title">'+PARAMS.Title+'</div><div class="zbox-popup-text">'+PARAMS.Content+'</div></div>');
    		    	  	dialogBtn=$('<div class="zbox-popup-buttons"><span class="zbox-popup-button" index="0">'+PARAMS.BtnL+'</span></div>');
    		    	  	if(caller=='Confirm'){
    		    	  		dialogBtn.append($('<span class="zbox-popup-button R" index="1">'+PARAMS.BtnR+'</span>')); 
    		    	  	}
    		    	  	dislogContainer.append(dialogInner);
    		    	  	dislogContainer.append(dialogBtn);
    		    	  	setTimeout(function(){
    		    	  		 $(".zbox-popup").addClass('zbox-popup-in');
    		    	  		 $(".zbox-popup-backdrop").addClass('zbox-active');
    		    	  	},10)
    		    	  	$("body").append(blackFilter);
    		    	    $("body").append(dislogContainer);
    		    	    
    		    	  	$(".zbox-popup-button").click(function(){
    		    	  		 var indexs=$(this).attr('index');
    		    	  		 if(indexs==0){
    		    	  		 	//左侧按钮
    		    	  		 	if($.isFunction(PARAMS.FunL)){
    		    	  		 		    PARAMS.FunL();
    					    	}else{
    					    			$.DialogByZ.Close(); 
    					    	}
    		    	  		 }else{
    		    	  		 	//右侧按钮 
    		    	  		 	if($.isFunction(PARAMS.FunR)){
    		    	  		 		    PARAMS.FunR();
    					    	}else{
    					    			$.DialogByZ.Close(); 
    					    	}
    		    	  		 }
    		    	  		 return false;
    		    	  	})
    		    	  	 
    		    	  }
    		    	  //	  
    		    }
    		})(jQuery,window,document);

    css代码

    @charset "utf-8";
    /* CSS Document */
    
    body{ -webkit-font-smoothing: antialiased; }
    .zbox-popup {
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;
        display: none;
        overflow: hidden;
        width: 270px;
        -webkit-transition-property: -webkit-transform,opacity;
        transition-property: transform,opacity;
        -webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2) ;
        transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1.2);
        text-align: center;
        opacity: 0;
        color: #000;
        border-radius: 3px;
        z-index: 10000;
         -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-font-smoothing: antialiased;
    }
    .zbox-popup.zbox-popup-in {
        display: block;
        transition-property: all;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1) ;
        transform:perspective(1200px) translate3d(-50%,-50%,0) scale(1);
        opacity: 1;
    }
    .zbox-popup-inner {
        position: relative;
        padding: 15px;
        border-radius: 3px 3px 0 0;
        background: rgba(255,255,255,.95);
    }
    .zbox-popup-inner:after {
        position: absolute;
        z-index: 15;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        background-color: rgba(0,0,0,.2);
    }
    .zbox-popup-title {
        font-size:16px;
        font-weight: 500;
        text-align: center;
        color: #4a4a4a;
    }
    .zbox-popup-title+.zbox-popup-text {
        font-family: inherit;
        font-size: 16px;
        margin: 5px 0 0;
        color: #4a4a4a;
        line-height: 1.75;
    }
    .zbox-popup-buttons {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        height: 44px;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .zbox-popup-button {
        font-size: 14px;
        line-height: 44px;
        position: relative;
        display: block;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding: 0 5px;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        color:#fd9e09;
        background: rgba(255,255,255,.95);
        -webkit-box-flex: 1;
    }
    .zbox-popup-button:first-child:last-child {
        border-radius: 0 0 3px 3px;
    }
    .zbox-popup-button.zbox-popup-button-bold {
        font-weight: 600;
    }
    .zbox-popup-button:after {
        position: absolute;
        z-index: 15;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
        display: block;
        width: 1px;
        height: 100%;
        content: '';
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        background-color: rgba(0,0,0,.2);
    }
    .zbox-popup-backdrop.zbox-active {
        opacity: 1;
    }
    .zbox-popup-backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        opacity: 0;
        background: rgba(0,0,0,.4);
    }
    .zbox-toast-container{
    	position:fixed;
    	z-index:9999;
    	bottom:60px;
    	width:100%;
    	-webkit-transition:opacity .8s;
    	transition:opacity .8s;
    	opacity:0;
    	left: 0;
    	}
    .zbox-toast-container.zbox-active{opacity:1}
    .zbox-toast-message{
    	font-size:14px;
    	width:270px;
    	margin:5px auto;
    	padding:5px;
    	text-align:center;
    	color:#000;
    	border-radius:5px;
    	background-color:#d8d8d8;
    	}
    	
    
    .zbox-btn-outlined.zbox-btn-blue, .zbox-btn-outlined.zbox-btn-primary {
        color: #007aff;
    }
    
    .zbox-btn-outlined {
        background-color: transparent;
    }
    .zbox-btn-blue, .zbox-btn-primary, input[type=submit] {
        color: #fff;
        border: 1px solid #007aff;
        background-color: #007aff;
    }
    .zbox-btn, button, input[type=button], input[type=reset], input[type=submit] {
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42;
        position: relative;
        display: inline-block;
        margin-bottom: 0;
        padding: 6px 12px;
        cursor: pointer;
        -webkit-transition: all;
        transition: all;
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
        -webkit-transition-duration: .2s;
        transition-duration: .2s;
        text-align: center;
        vertical-align: top;
        white-space: nowrap;
        color: #333;
        border: 1px solid #ccc;
        border-radius: 3px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
        background-color: #fff;
        background-clip: padding-box;
    }
    .zbox-btn {
        display: block;
        width: 120px;
        margin: 10px auto;
    }
    	#zchange{ width:44px; height: 44px; display:block;margin: 0 auto; 
    	animation:circle1 1.2s infinite linear; -webkit-animation:circle1 1.2s infinite linear; transition: all linear;}
    
    @-webkit-keyframes circle1
    {
    0% { -webkit-transform: rotate(0deg)  }
    100% {  -webkit-transform: rotate(360deg)  ;}
    }
    
    @keyframes circle1
    {
    0% { transform: rotate(0deg)  ;}
    100% { transform: rotate(360deg) ;}
    }
    

    展开全文
  • 自定义弹出框效果

    2017-05-19 19:36:00
    网站而言,弹出框是比较常见的。或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等。 但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器有...

    对网站而言,弹出框是比较常见的。或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等。

    但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器有不同的默认样式设置。

    所以在日常工作中,给网站做一个自定义的弹出框十分必要。特别是富交互的网站

     

    一、提示框

    html部分:

     1 <!--修改弹窗-->
     2 <div class="pop-alert" id="pop" style="display:none">
     3     <div class="btbox"><a href="javascript:Func.popHide('#pop')" class="gb">x</a></div>
     4     <div class="cont clearfix">
     5         <p class="jx_inf">这是一个提示</p>
     6     </div>
     7     <div class="an_box">
     8         <a href="javascript:Func.popHide('#pop')" class="btn-comm-small btn-comm-white btn">确 认</a>
     9     </div>
    10 </div>

    css部分:定义基本样式

     1  .pop-alert{width:353px; height:205px;border: 1px solid #d6d8d9;background: #f3f5f7;position:fixed;top:50%;left:50%;margin:-220px 0 0 -370px;outline:none;display:none;z-index:999;}
     2  .pop-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:998;}
     3  .btbox{ height:40px;}
     4  .btbox sp{font-size: 1.4em;font-weight: bold;color: #fff;line-height: 40px;margin-left: 10px;}
     5  .gb{ width:24px; height:24px; display:inline; margin:5px 5px 0 0; color: #909091;text-align: center;position: absolute;top: 0;right: 0;}
     6  .gb:hover{ background-position:0 -24px;}
     7  .cont{ padding-top:22px; text-align:center;}
     8  .cont img,.cont p{ display:inline-block; margin:0 8px; vertical-align:top;}
     9  .cont p{ text-align:left;color:#999;min-height: 80px;}
    10  .jx_inf{line-height:20px; font-size:14px;text-align: center;}
    11  .jx_inf span{ color:#00fb76;}
    12  .an_box{ text-align:center; height:32px;}
    13  .an_box a{width:100px; height:32px;  display:inline-block;font-weight:bold;background:#3898fe;color:#fff; text-align:center; line-height:32px; font-size:14px;border-radius:4px;}
    14  .an_box a:hover{ background-color:  #58a9ff;}

    js部分: 生成行内样式 

            popShow:function(popBox) {
                var p=$(popBox);
                p.show();
                p.css({
                    position: 'fixed',
                    top: ($(window).height() - p.height()) / 2,
                    left: ($(window).width() - p.width()) / 2,
                    marginTop:0,
                    marginLeft:0,
                    zIndex: 1005
                });
                $('.pop-bg').show();
                $('<span class="pop-bg"></span>').appendTo("body");
            },
            popHide:function(popBox) {
                $(popBox).hide();
                $('.pop-bg').remove();
            },

    如上所示:css方面,关键的是 1、position:fixed样式,2、然后在定义 top和left 3、z-index的遮罩层的生成  

          js方面 就是控制 弹出框的显示和隐藏

     

    转载于:https://www.cnblogs.com/blog-index/p/6880015.html

    展开全文
  • 由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS 但是还是自己写的比较放心,顺便练习一下对DOM的操作 支持IE6下的SELECT不能遮罩的问题,...点击模拟Alert弹出框 ...

    由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS

    但是还是自己写的比较放心,顺便练习一下对DOM的操作

    支持IE6下的SELECT不能遮罩的问题,谷歌支持圆角,IE6下就比较丑了,四四方方的,不过可以自定义自己喜欢的样式

    听取建议后,修改了position:fixed, IE6下用hack处理了。

    点击看效果:

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    所需CSS:

        <style type="text/css">
            #alertMsg {
                display: none;
                width: 400px;
                border: 1px solid #ddd;
                border-radius: 5px;
                box-shadow: 1px 1px 10px black;
                padding: 10px;
                font-size: 12px;
                position: absolute;
                text-align: center;
                background: #fff;
                z-index: 100000;
            }
    
            #alertMsg_info {
                padding: 2px 15px;
                line-height: 1.6em;
                text-align: left;
            }
    
            #alertMsg_btn1, #alertMsg_btn2 {
                display: inline-block;
                background: url(images/gray_btn.png) no-repeat left top;
                padding-left: 3px;
                color: #000000;
                font-size: 12px;
                text-decoration: none;
                margin-right: 10px;
                cursor: pointer;
            }
    
            #alertMsg_btn1 cite, #alertMsg_btn2 cite {
                line-height: 24px;
                display: inline-block;
                padding: 0 13px 0 10px;
                background: url(images/gray_btn.png) no-repeat right top;
                font-style: normal;
            }
    
        </style>

     使用方法,直接调用函数,传递所需定义的信息,支持定义是否有取消键:

    alertMsg(msg, mode)  
    //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮

     

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    函数代码:添加了一个获取窗口尺寸的函数,又长长了很多,可以把获取窗口的尺寸另外立一个函数放公共库里面,这里只是为了方便演示,写到一个函数里面

    function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮
            msg = msg || '';
            mode = mode || 0;
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            var isIe = (document.all) ? true : false;
            var isIE6 = isIe && !window.XMLHttpRequest;
            var sTop = document.documentElement.scrollTop || document.body.scrollTop;
            var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            var winSize = function(){
                var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
                // innerHeight获取的是可视窗口的高度,IE不支持此属性
                if (window.innerHeight && window.scrollMaxY) {
                    xScroll = document.body.scrollWidth;
                    yScroll = window.innerHeight + window.scrollMaxY;
                } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                    xScroll = document.body.scrollWidth;
                    yScroll = document.body.scrollHeight;
                } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                    xScroll = document.body.offsetWidth;
                    yScroll = document.body.offsetHeight;
                }
    
                if (self.innerHeight) {    // all except Explorer
                    windowWidth = self.innerWidth;
                    windowHeight = self.innerHeight;
                } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                    windowWidth = document.documentElement.clientWidth;
                    windowHeight = document.documentElement.clientHeight;
                } else if (document.body) { // other Explorers
                    windowWidth = document.body.clientWidth;
                    windowHeight = document.body.clientHeight;
                }
    
                // for small pages with total height less then height of the viewport
                if (yScroll < windowHeight) {
                    pageHeight = windowHeight;
                } else {
                    pageHeight = yScroll;
                }
    
                // for small pages with total width less then width of the viewport
                if (xScroll < windowWidth) {
                    pageWidth = windowWidth;
                } else {
                    pageWidth = xScroll;
                }
    
                return{
                    'pageWidth':pageWidth,
                    'pageHeight':pageHeight,
                    'windowWidth':windowWidth,
                    'windowHeight':windowHeight
                }
            }();
            //alert(winSize.pageWidth);
            //遮罩层
            var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' +  (winSize.pageHeight + 30) + 'px;';
            styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
            var shadowDiv = document.createElement('div'); //添加阴影DIV
            shadowDiv.style.cssText = styleStr; //添加样式
            shadowDiv.id = "shadowDiv";
            //如果是IE6则创建IFRAME遮罩SELECT
            if (isIE6) {
                var maskIframe = document.createElement('iframe');
                maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
                maskIframe.frameborder = 0;
                maskIframe.src = "about:blank";
                shadowDiv.appendChild(maskIframe);
            }
            document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
            //弹出框
            var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置
            var alertBox = document.createElement('div');
            alertBox.id = 'alertMsg';
            alertBox.style.cssText = styleStr1;
            //创建弹出框里面的内容P标签
            var alertMsg_info = document.createElement('P');
            alertMsg_info.id = 'alertMsg_info';
            alertMsg_info.innerHTML = msg;
            alertBox.appendChild(alertMsg_info);
            //创建按钮
            var btn1 = document.createElement('a');
            btn1.id = 'alertMsg_btn1';
            btn1.href = 'javas' + 'cript:void(0)';
            btn1.innerHTML = '<cite>确定</cite>';
            btn1.onclick = function () {
                document.body.removeChild(alertBox);
                document.body.removeChild(shadowDiv);
                return true;
            };
            alertBox.appendChild(btn1);
            if (mode === 1) {
                var btn2 = document.createElement('a');
                btn2.id = 'alertMsg_btn2';
                btn2.href = 'javas' + 'cript:void(0)';
                btn2.innerHTML = '<cite>取消</cite>';
                btn2.onclick = function () {
                    document.body.removeChild(alertBox);
                    document.body.removeChild(shadowDiv);
                    return false;
                };
                alertBox.appendChild(btn2);
            }
            document.body.appendChild(alertBox);
    
        }
     

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    点击模拟Alert弹出框

    转载于:https://www.cnblogs.com/NNUF/archive/2012/04/26/2471120.html

    展开全文
  • 弹出框JBox实例

    万次阅读 热门讨论 2013-10-10 20:27:52
    主要是因为普通的弹出框样式不是很好,颜色也不能调换。这里我们用的是JBox,还是从师傅那得知的。自己小实验了下,这里就做个小结。 JBox 插件说明  - jBox 是一款基于jQuery 的多功能对话框插件,能够实现...

    前几天做的考试系统的一些后台弹出框的一些模板。主要是因为普通的弹出框样式不是很好,颜色也不能调换。这里我们用的是JBox,还是从师傅那得知的。自己小实验了下,这里就做个小结。

    JBox


    插件说明


       - jBox 是一款基于jQuery的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受。


    运行环境


             - 兼容 IE6+FirefoxChromeSafariOpera等主流浏览器。备注:IE不支持边框的圆角样式,不推荐大家使用蛋痛的IE浏览器。


     使用Jbox函数的时候,需要先了解下Jbox的函数原型


    函数原型:


    $.jBox.prompt(content,title, icon, options);
        或者jBox.prompt(content, title, icon, options);
    参数说明:
    -content (string)
       只能是string,不支持前缀标识,默认值为''。
    -title [可选] (string)
       窗口标题,值为null时为不显示标题,默认值为 $.jBox.defaults.title。
    - icon [可选](string)
       内容图标,值为'none'时为不显示图标,可选值有'none'、'info'、'question'、'success'、'warning'、'error',默认值为'none'。
    -options [可选] (json)
        其它参数选项,默认值为$.jBox.defaults。
    函数的参数和先前vbmsgbox的内容几乎是一样的,所以这个不说也是很明白的。
     
    $.jBox.tip(content, icon, options); 和上面的函数类似,只是表现的形式不同,它以文字框的形式出现.一般用在最后的结果提示上。
     

    实例


    function demo1() {
     
        $.jBox.tip('Hello jBox');
     
    }


     提示框如下



     

     


    下面就做个测试吧


    先建立html页面或是Asp.net页面
     
     1 首先的下载JBox的代码库 js函数库。这里给出下载的网址。http://www.kudystudio.com/jbox/jbox-demo.html

     

     2 之后就是引入JBox的函数库。引入需要

     
    <linkhref="jBox/Skins/Green/jbox.css" rel="stylesheet"type="text/css" />//我这里使用的是绿色的皮肤,jbox的皮肤有多种样式,可以自己选择。
     
      <script type="text/javascript"src="jBox/jquery-1.4.2.min.js"></script>
      <script type="text/javascript"src="jBox/jquery.jBox-2.3.min.js"></script>
      <script type="text/javascript"src="jBox/i18n/jquery.jBox-zh-CN.js"></script>
     


     3 调用Jbox的原形函数进行编写


    <script type="text/javascript">{
    function demo2() {
    var submit = function (v, h, f) {
    if (v == true)
    jBox.tip("恩", 'info');
    else
    jBox.tip("好吖", 'info');
    return true;
    };
    // 自定义按钮
    $.jBox.confirm("天使,做我女朋友吧?", "表白提示", submit, { buttons: { '恩': true, '好吖': false} });
    }}

    Html页面的代码

    <body>
    <div>
      <form id="form1" name="form1" method="post" action="">
        <input type="button" name="button" id="button" value="按钮"   οnclick="demo2()"/>
      </form>
     
      </div>
    	
    </body>
    

    调用的结果如下



     

     
    点击好吖给予提示。
     


     

    function demo3() {
    var submit = function (v, h, f) {
    if (v == 'yes') {
    $.jBox.tip('已保存。', 'success');
    }
    if (v == 'no') {
    $.jBox.tip('没保存。');
    }
    if (v == 'cancel') {
    $.jBox.tip('已取消。');
    }
    return true;
    };
    // 可根据需求仿上例子定义按钮
    $.jBox.warning("内容已修改,是否保存?", "提示", submit);
    }


     提示框如下



     

     


    经过以上演示是不是有种焕然一新的感觉呢。其实Jbox的函数原型有很多种,和我们以前学习过的一些函数的样式和名字几乎是想通的,只要花一点时间基本就可以认识的差不多。期待大家的更好的使用和掌握Jbox的学习。


    展开全文
  • 弹出框(dialog)制作

    2016-04-26 14:07:00
    对一般的网站而言,弹出框是比较常见的。或是给出用户操作提示,或是通过弹出框打开一个小窗口以提示信息,或是给出错误警示等等。但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调,且不同浏览器...
  • 自制弹出框插件

    2015-04-23 22:48:17
     LZ前段时间做了一个新项目,在新要求中,新增,编辑这些页面不能嵌在页面里,需要使用悬浮的弹出框插件,由于网站风格的原因,弹出框样式等都是美工设计好的,项目经理有意让LZ封装一个内部使用的弹出框插件出来...
  • 由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS 但是还是自己写的比较放心,自己是新手,所以顺便练习一下对DOM的操作 支持IE6下的SELECT不能遮罩的问题,谷歌...
  • 【JavaScript】8.弹出框(Dialog)

    万次阅读 2018-01-30 14:42:26
    最近做项目,用到了弹出框...但是由于浏览器自带的弹出窗口alert,confirm,prompt样式比较单调,且不同的浏览器有不同的默认样式设置,所以在日常工作中,给网站做一个自定义的弹出框非常必要。 html部分 Click Me!
  • 网页弹出框----播放视频网站的视频 1/准备好基础网页.重置样式表什么的都已经写好的网页 2/调入弹出框CSS样式 /*! * ui-dialog.css * Date: 2014-07-03 * https://github.com/aui/artDialog * (c) ...
  • 这是一款比较实用而美观的jQuery分享按钮插件,和前面分享又一波CSS3社会化分享图标 可旋转和悬停和一大波CSS3社会化分享图标按钮相比...会以Tooltip弹出框样式显示分享按钮,并且在弹出时伴随着左右摇晃的动画特效。
  • vant-dialog 弹出框 多个按钮

    千次阅读 2019-12-30 11:12:16
    开发过程中,碰到恶心需求 ...1.dialog 弹出框,组件默认的有确定及取消按钮 首先,在开发者模式下,找到该确定或取消的css样式,设置: display: none; 这时就看到无论确定或取消,就会显出不了 2.然后在di...
  • 最近做项目写个表单验证,提交信息验证有错误的时候,用了最懒的方法,直接把错误提示用alert()弹出框弹出来,于是老大看完后给了这个表情。。。 确实,自带弹窗样式丑不能自定义这些问题困扰着很多用户,而且在...
  • 【JavaScript 12—应用总结】:弹出登录

    千次阅读 热门讨论 2015-07-17 16:21:55
    导读:上篇博客中,做好了个人中心的下拉菜单,这次,将做每个网站都会有的一个登录功能,以此类推,可以做出别的想要的弹出框,如错误提示啦,或者注册。 一、实现分析 首先:和下拉菜单一样,需要通过CSS样式将...
  • - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受。 运行环境 - 兼容 IE6+、Firefox、Chrome、Safari、Opera 等主流浏览器。备注:IE不支持边框的圆角样式,不...
  • 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业、职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6。这里介绍行业、职位和地区选择器,下载的Demo包含这三个选择器。 ...
  • 功能介绍:点击一个按钮,然后页面会弹出一个窗口,而页面原来的内容会保持不变,只是在其页面上加...js实现一个弹出框</title> <style type="text/css"> /*预先写好弹出窗的样式*/ #menu{height: 900px;}
  • 弹出式登录界面

    万次阅读 2018-05-23 11:57:25
    要实现这个功能的大致思路是:1....,一个登录功能的div,另一个注册功能的div,注意位置的设置,当网站首次加载进入的时候登录不可见,那就要把样式设置为display:"none"3.当用户点击登录按...
  • 一个简单的CSS弹出

    2015-07-13 22:24:12
    这些弹出窗口也往往是以浏览器默认的样式出现的,各个浏览器或者是手机网站渲染的效果也往往不同。下面做一个统一的弹窗,可以根据根据自己的喜好自动调整。 需要的技术支持:一般jQuery库; HTML代码: <...
  • 弹出窗口—jQuery UI Dialog和artDialog

    千次阅读 2011-11-28 15:02:54
    由于一些元老级人物还在用IE6,artDialog在IE6下窗体样式有些不兼容,所以着手研究jquery UI Dialog,发现网站上对这两种方式都给出了详细的属性介绍和Demo,对Iframe框架的弹出也有很好的解决方案,用起来非常简单也...
  • 当您创建具有丰富色彩组合和精美动画的网站以改善用户的浏览体验时,未设置样式的警报似乎会不合适。 在本教程中,您将学习一个名为SweetAlert2的库,该库使我们可以创建各种警报消息,可以对其进行自定义以...
  • 其次在页面合适位置制作两个,一个登录功能的div,另一个注册功能的div,注意位置的设置,当网站首次加载进入的时候登录不可见,那就要把样式设置为display:"none"3.当用户点击登录按钮的时候,通过JS设置登录div的...
  • 弹出菜单可在Twitter上共享或通过电子邮件共享页面上选择的任何文本,并支持移动设备(带有弹出框)。 如何将其添加到您的网站 该脚本需要jQuery,因此请确保已将其加载到页面上。 在页面的<head>中添加样式...
  • 模板继承在项目中,可能会遇到以下情况:多个模板具有完全相同的顶部和底部内容多个...一般Web开发中,继承主要使用在网站的顶部菜单、底部菜单版权信息,或弹出窗口。这些内容可以定义在父模板中,子模板直接继承,...
  • 自定义弹窗Style样式

    2016-05-28 02:24:00
    由于系统默认alert弹出窗口不能自定义样式,有可能不符合网站的风格,虽然网上应该有很多这样的JS 但是还是自己写的比较放心,顺便练习一下对DOM的操作 支持IE6下的SELECT不能遮罩的问题,...点击模拟Alert弹出框 ...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 281
精华内容 112
关键字:

弹出框样式网站