CSS之提示框实现 -

Lixh1986

浏览: 1112588 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS之提示框实现

博客分类：

CSS 提示框箭头关闭按钮

效果图：

注意以下要点：

1、提示框的箭头效果，且箭头随位置变动。

2、提示框的关闭按钮，且提示框内容高度随意。

3、阴影效果

测试网址：
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow

代码：

<!DOCTYPE HTML>  
<HTML>  
<HEAD>  
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    <script>
    	$(function(){
        	function showTip(flag){
            	var tip = $("div.tool-tip-content-wrapper, div.tool-tip-info-border");
                if(flag) tip.show();
                else tip.hide();
            }
        	$("span.tool-tip-info").on("click",function(){
            	showTip(true);
            });
       	    $("div.tip-content-btn").on("click",function(){
            	showTip(false);
            });
        });
    
    </script>

<style>  

	.tool-tip-info-border{
    	display:none;
    }
    
    
 	.tool-tip-info-border-b{  
           border-top-color: #fff; 
            border-left-color: transparent;  
            border-right-color: transparent;  
            border-bottom-color: transparent;  
            border-style: dashed dashed solid;  
            border-width: 8px;
            position: absolute;  
            top: -12px;  
            left: -2px;  
            z-index:2000;
            height: 0;  
            width: 0;  
         
    }
    .tool-tip-info-border-a{  
            border-top-color: #aaa; 
            border-left-color: transparent;  
            border-right-color: transparent;  
            border-bottom-color:transparent;  
            border-style: dashed dashed solid;  
            border-width: 8px;  
            position: absolute; 
            top: -11px;  
            left: -2px;  
            z-index:2000;
            height: 0;  
            width: 0; 
    }  
    
    .tool-tip-content {  
            background: #fff;  
            border: 1px solid #ccc;  
            border-color: rgba(0,0,0,.2);  
            -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);  
            box-shadow: 0 2px 10px rgba(0,0,0,.2);  
            outline: none;  
            overflow: hidden;  
            position: absolute;  
            left: 0px;  
            bottom: 7px;  
            -webkit-animation: gb__a .2s;  
            animation: gb__a .2s;  
            -webkit-border-radius: 2px;  
            border-radius: 2px;  
            -webkit-user-select: text;  
            width:360px;  
            height:auto;  
            padding:15px;  
            font: 13px 'Lato',sans-serif;
            color:rgb(51,51,51);
            box-sizing: border-box;
    }  
   
   
   .tool-tip-info{
   		position:relative;
        display:inline-block;
        width:13px;
        height:13px;
        text-align:center;
        line-height:13px;
        border: 1px solid #407bae;
        border-radius:10px;
        color:#407bae;
        font: 12px 'Lato',sans-serif;
        cursor:pointer;
   } 
  
  
  
  .tip-content-btn{
  		position:absolute;
        top:2px;
        right:2px;
        width:13px;
        height:13px;
        cursor:pointer;
  }
  
  .tip-content-btn:before{
  		position:absolute;
        top:1px;
        left:3px;
        width:1px;
        height:15px;
        background-color:#888;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        content:"";
  }
  
  .tip-content-btn:hover:before{
  		background-color:#333;
  }
  
  .tip-content-btn:after{
  		position:absolute;
        top:1px;
        left:3px;
        width:1px;
        height:15px;
        background-color:#888;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        content:"";
  }
  
  .tip-content-btn:hover:after{
  		background-color:#333;
  }
  
  .tool-tip-content-wrapper{
  		position:relative !important;
    	height:0px;
        display:none;
        z-index:1000;
  }
      
</style>  
</HEAD>  
<BODY>  
<p>Paragraph A</p>
<p>Paragraph B</p>
<p>Paragraph C</p>
<p>Paragraph D</p>
<p>Paragraph E</p>
<p>Paragraph F</p>
<p>Paragraph G</p>

<div class="tool-tip-content-wrapper"> 
    <div class="tool-tip-content"> 
    	<div class="tip-content-msg">
        	Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
        </div>
    	<div class="tip-content-btn"></div>
    </div>
</div> 

<div>
	Last Name: 
	<span class="tool-tip-info">
    	<span>i</span>
        <div class="tool-tip-info-border">
        	<div class="tool-tip-info-border-a"></div>  
 			<div class="tool-tip-info-border-b"></div>
        </div>
    </span>
</div>

<hr/>





<!--======== TEST CODE ONLY :::::::: Test Begin =========== -->
<p>Paragraph A</p>
<p>Paragraph B</p>
<p>Paragraph C</p>
<p>Paragraph D</p>
<p>Paragraph E</p>
<p>Paragraph F</p>
<p>Paragraph G</p>

<div class="tool-tip-content-wrapper"> 
    <div class="tool-tip-content"> 
    	<div class="tip-content-msg">
        	Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
            Providing your last name adds another 
        	layer of security and keeps your World Of Tester profile protected.
        </div>
    	<div class="tip-content-btn"></div>
    </div>
</div> 

<div>
	Longer - Last Name: 
	<span class="tool-tip-info">
    	<span>i</span>
        <div class="tool-tip-info-border">
        	<div class="tool-tip-info-border-a"></div>  
 			<div class="tool-tip-info-border-b"></div>
        </div>
    </span>
</div>

<!--======== TEST CODE ONLY :::::::: Test End =========== -->


<BODY>  
</HTML>

转载请注明，
原文出处：http://lixh1986.iteye.com/blog/2387980

-

查看图片附件

分享到：

Spring - MVC 思维导图，让Spring不再难懂 | Adobe - CQ Author - Packge Manager

2017-08-02 05:08
浏览 1963
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS之提示框实现

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS之提示框实现

评论

发表评论

相关推荐

Flex之 justify-content 和 flex-direction 的应用

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

HTML5之canvas之粒子效果

CSS之导航栏设计之 ul 之 li 标签排成一行

HTML5/CSS3鼠标滑过图片滤镜动画效果

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

CSS - table 圆角 border radius

[css - hr ] border color 横线高度和颜色

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）