欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS如何实现提示框的实例详解

程序员文章站 2022-05-02 16:45:34
...
效果图:

CSS如何实现提示框的实例详解

注意以下要点:

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

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

3、阴影效果

代码:

<!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>

以上就是CSS如何实现提示框的实例详解的详细内容,更多请关注其它相关文章!