zoukankan      html  css  js  c++  java
  • CSS写的提示框(兼容火狐IE等各大浏览器)

    项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样

    原Tooltip代码:

    $('#dd').tooltip({
        position: 'right',    
        content: '<span style="color:#fff"><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info1"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info2"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info3"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info4"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info5"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info6"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info7"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info8"/><br/>'
            +'<s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info9"/></span>',    
        onShow: function(){        
            $(this).tooltip('tip').css({backgroundColor: '#666',borderColor: '#666'});
        }        
    });

     使用CSS修改:a标签后加个div存储提示框内容

    <span><a id="dd" href="javascript:void(0)" style="color: blue"><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex"/></a></span>
    <div id="small-tip">
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info1"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info2"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info3"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info4"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info5"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info6"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info7"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info8"/></span><br/>
    	<span><s:text name="com.vrv.cems.policy.template.userPassword.localPass.passComplex.info9"/></span>	
    </div>
    

     给div加样式:(当然,提示框需要别的样式可以直接在这修改样式即可)

    #small-tip{
    	display:none;
    	position:absolute;
    	color:#fff;
    	background:#666;
    	padding:5px;
    	250px;
    }
    

     最后,给div#small-tip定位 和 给a标签绑定鼠标事件

    /*设置密码提示框*/
    $("#dd").mouseover(function(){
    	$("#small-tip").css("display","block");
    	setTipPlace();
    });
    $("#dd").mouseleave(function(){
    	$("#small-tip").css("display","none");
    });
    
    function setTipPlace(){
    	var aWidth = parseFloat($("#dd").width(),10),
    		aHeight = parseFloat($("#dd").height(),10),
    		tipHeight = parseFloat($("#small-tip").height(),10);
    	var tipTop = - ( aHeight + tipHeight ) / 2 + "px",
    	tipLeft= ( aWidth + 30 ) + "px";
    	$("#small-tip").css("margin-left", tipLeft);
    	$("#small-tip").css("margin-top", tipTop);
    }
    

     最后如图提示框即可完成,且兼容性很好。

  • 相关阅读:
    sqlserver tips
    mysql tips
    小知识点集锦
    设计模式
    将微博或者qq空间的说说同步至博客园 wcf+js(ajax)跨域请求(1)
    WCF服务寄宿IIS与Windows服务
    C# 基础小知识之yield 关键字
    WPF命令绑定 自定义命令
    KnockOut 绑定之foreach绑定(mvc+knockout)
    P5019 铺设道路
  • 原文地址:https://www.cnblogs.com/goloving/p/7009388.html
Copyright © 2011-2022 走看看