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

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

  • 相关阅读:
    Oracle RAC19c 技术架构
    Tibero备用集群(Tibero Standby Cluster)
    Oracle巡检
    Tibero备份与恢复
    文件
    rac环境无法监听数据库实例
    DBCA Second/last instance startup fails/ generic startup with ORA-03113 in 12.2 due to wrong rp_filter setting for private interconnect interfaces
    19c配置ssh互信失败
    Oracle数据文件收缩最新脚本
    Instance crashed after ORA-7445 [opiaba] and ORA-600 [17147]
  • 原文地址:https://www.cnblogs.com/goloving/p/7009388.html
Copyright © 2020-2023  润新知