PC端-自制弹框组件

最新推荐文章于 2025-02-19 16:03:16 发布

原创最新推荐文章于 2025-02-19 16:03:16 发布 · 408 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

这篇博客介绍了如何创建一个自定义的PC端弹框组件，包括引用的样式表和JavaScript文件，如cyq-define.css、iconfont.css、alert.js和jquery.easing.1.3.js。内容涵盖HTML结构、JavaScript逻辑、CSS样式以及详细代码实现。

<link rel="stylesheet" type="text/css" href="${ctx}/style/css/cyq-define.css" />

<link rel="stylesheet" href="${ctx}/images/alertFonts/iconfont.css" />
<script src="${ctx}/js/alert/alert.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery.easing.1.3.js" type="text/javascript"></script>

HTML部分

<!-- 弹出框组件 -->
<div class="cyq-alert"></div>

JS部分

function showDetail(obj) {
	var detail = $(obj).parent().parent().parent().find("input[name='priceMsg']").val().replace(/<br>/g,' ');
	$('.cyq-alert .content p').html(detail);
	$('.cyq-alert').css({
		display: 'inline-block'
	});
	$('.cyq-alert').animate({
		opacity: '1',
		top: '50%',
		left: '50%'
	},500,'easeOutCubic');
}

createAlert($('.cyq-alert'));

详细代码

css

/* 弹出框样式 */
.cyq-alert .iconfont-reset {
	background: none;
	width: auto;
  height: auto;
  margin-right: 0;
  float: none;
}
.cyq-alert {
    display: none;
    min-width: 320px;
    min-height: 56px;
    border-left: 4px solid #3879d9;
    position: fixed;
    left: 50%;
    top: -100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    padding: 25px 25px 25px 60px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .2);
    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, .2);
    z-index: 1056;
    opacity: 0;
}

.cyq-alert .close-btn {
    position: absolute;
    top: 1px;
    right: 4px;
    color: #3879d9;
    cursor: pointer;
    opacity: .9;
}

.cyq-alert .close-btn i.iconfont {
    font-size: 20px;
    font-weight: bold;
}

.cyq-alert .close-btn:hover {
    opacity: 1;
}

.cyq-alert .alert-main {
    font-size: 0;
    display: inline-block;
}

.cyq-alert .img {
    position: absolute;
    left: 15px;
    top: 50%;
    margin-top: -16px;
}

.cyq-alert .img i.iconfont {
    font-size: 30px;
    color: #3879d9;
}

.cyq-alert .content {
    display: inline-block;
    min-width: 220px;
    max-width: 380px;
    vertical-align: middle;
}

.cyq-alert .content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #3879d9;
    margin: 0;
    margin-top: -2px;
    margin-bottom: 5px;
}

.cyq-alert .content p {
    font-size: 14px;
    color: #3879d9;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 20px;
    text-indent: 2em;
}

.cyq-alert .drag{
    display: block;
    width: calc(100% - 30px);
    height: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: move;
}

JS

function createAlert($el) {
	$el[0].innerHTML =
	'<span class="close-btn"><i class="iconfont iconfont-reset icon-guanbi1"></i></span>\
	<span class="drag"></span>\
	<div class="alert-main">\
	    <div class="img"><i class="iconfont iconfont-reset icon-xinxifuwu"></i></div>\
	    <div class="content">\
	        <h3>网价来源</h3>\
	        <p></p>\
	    </div>\
	</div>';
	function down(e) {
	    //获取元素的开始位置和鼠标点击的开始位置
	    var maxW = document.body.clientWidth;
	    var elem = $el[0];
	    var left = parseFloat($el.css('left'));
	    var top = parseFloat($el.css('top'));
	    var eleWidth = $el.outerWidth();
	    var eleHeight = $el.outerHeight();
	    var minWidth = parseFloat($el.css('minWidth'));
	
	    startX = e.clientX;
	    startY = e.clientY;
	    function move(e) {
	        var newLeft = 0;
	        var newTop = 0;
	        endX = e.clientX;
	        endY = e.clientY;
	        newLeft = left + endX - startX;
	        newTop = top + endY - startY;
	        if (newLeft > maxW - minWidth / 2) {
	            newLeft = maxW - minWidth / 2;
	        } else if (newLeft < eleWidth / 2) {
	            newLeft = eleWidth / 2;
	        }
	
	        if (newTop < eleHeight / 2) {
	            newTop = eleHeight / 2;
	        }
	        $el.css({
	            left: newLeft,
	            top: newTop
	        });
	    }
	
	    function up() {
	        $(document).off('mousemove');
	        $(document).off('mouseup');
	        //释放捕获
	        elem.releaseCapture && elem.releaseCapture();
	    }
	    $(document).on('mousemove', move);
	    $(document).on('mouseup', up);
	    //设置捕获
	    elem.setCapture && elem.setCapture();
	    //阻止浏览器默认事件
	    e.preventDefault && e.preventDefault();
	    return false;
	}
	$el.find('.drag').on('mousedown', down);
	
	//弹出框关闭
	$el.on('click','.close-btn',function(){
		$el.css({display:'none',opacity:0,top:'-100%'});
	});
}

jquery.easing.1.3.js

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - jQuery Easing
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2008 George McGinley Smith
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
*/

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend(jQuery.easing,
    {
        def: 'easeOutQuad',
        swing: function (x, t, b, c, d) {
            //alert(jQuery.easing.default);
            return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
        },
        easeInQuad: function (x, t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOutQuad: function (x, t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        },
        easeInOutQuad: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInCubic: function (x, t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOutCubic: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOutCubic: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t + 2) + b;
        },
        easeInQuart: function (x, t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutQuart: function (x, t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOutQuart: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },
        easeInQuint: function (x, t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOutQuint: function (x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOutQuint: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
            return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
        },
        easeInSine: function (x, t, b, c, d) {
            return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        easeOutSine: function (x, t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOutSine: function (x, t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        },
        easeInExpo: function (x, t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOutExpo: function (x, t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOutExpo: function (x, t, b, c, d) {
            if (t == 0) return b;
            if (t == d) return b + c;
            if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
        },
        easeInCirc: function (x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOutCirc: function (x, t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOutCirc: function (x, t, b, c, d) {
            if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
        },
        easeInElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        easeOutElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },
        easeInOutElastic: function (x, t, b, c, d) {
            var s = 1.70158; var p = 0; var a = c;
            if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
            if (a < Math.abs(c)) { a = c; var s = p / 4; }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
        },
        easeInBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOutBack: function (x, t, b, c, d, s) {
            if (s == undefined) s = 1.70158;
            if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },
        easeInBounce: function (x, t, b, c, d) {
            return c - jQuery.easing.easeOutBounce(x, d - t, 0, c, d) + b;
        },
        easeOutBounce: function (x, t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
            } else {
                return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
            }
        },
        easeInOutBounce: function (x, t, b, c, d) {
            if (t < d / 2) return jQuery.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
            return jQuery.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    });

/*
 *
 * TERMS OF USE - EASING EQUATIONS
 *
 * Open source under the BSD License.
 *
 * Copyright © 2001 Robert Penner
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * Redistributions of source code must retain the above copyright notice, this list of
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list
 * of conditions and the following disclaimer in the documentation and/or other materials
 * provided with the distribution.
 *
 * Neither the name of the author nor the names of contributors may be used to endorse
 * or promote products derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 * OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 */

标签

#组件