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);
    }
    

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

  • 相关阅读:
    期待着一个目标 和一个新生
    做一个真正意志坚强的人
    从猫叫、老鼠跑和人醒看观察者模式
    再看C++(6)操作符重载
    英尺
    再看C、C++、数据结构(三)
    一道比较有意思的打印题(不需要会很多计算机语言知识,简单的C就行)
    再看C++(四)const的终极使用
    再看C、C++、数据结构(二)
    再看C语言和数据结构(一)
  • 原文地址:https://www.cnblogs.com/goloving/p/7009388.html
Copyright © 2011-2022 走看看