bootstrap 弹出框

      <span>测试鼠标移入移出</span>  
      <a id="topdaohang" target="_blank" >
      <img src="https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a1.png" alt="">  

      </a>

$(function(){

    var ulstring="<ul id='sss' style='width:150px;top: 50px;'>"  

            +"<a style='margin-left:-20px;'><img src='/dmsd-itoo-video-web/images/gerenzhongxin.png'>个人中心</a><br>" 

            +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  

            +"<a href='/dmsd-itoo-video-web/upload/showPage' style='margin-left:-20px;'>“

            +”<img src='/dmsd-itoo-video-web/images/shangchuanshipin.png'>上传视频</a><br>"  

            +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  

            +"<a href='/dmsd-itoo-video-web/historyRecord/historyRecordInfo' style='margin-left:-20px;'>“

            +”<img src='/dmsd-itoo-video-web/images/guankanjilu.png'>观看记录</a><br>"  

            +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
            +"</ul>";  

    $("#topdaohang").popover({   
        trigger:'manual',//触发方式  
        placement : 'bottom',    
        title:'<div style="text-align:left; color:gray; font-size:12px;">用户名称</div>',  
        html: 'true',   
        content : ulstring,  //这里可以直接写字符串,也可以 是一个函数,该函数返回一个字符串;  
        animation: false     //向弹出框应用 CSS 褪色过渡效果。默认值:true
    }) 
    .on("mouseenter", function () {  
        var _this = this;  
        $(this).popover("show");  
        $(this).siblings(".popover").on("mouseleave", function () {  
            $(_this).popover('hide');  
        });  
    })
    .on("mouseleave", function () {  
      var _this = this;  
      setTimeout(function () {  
          if (!$(".popover:hover").length) {  
              $(_this).popover("hide");  
          };  
      }, 100);  
    });

}

选项名称类型/默认值Data 属性名称描述
animationboolean
默认值:true
data-animation向弹出框应用 CSS 褪色过渡效果。
htmlboolean
默认值:false
data-html向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placementstring|function
默认值:top
data-placement规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为 auto 时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selectorstring
默认值:false
data-selector如果提供了一个选择器,弹出框对象将被委派到指定的目标。
titlestring | function
默认值:''
data-title如果未指定 title 属性,则 title 选项是默认的 title 值。
triggerstring
默认值:'hover focus'
data-trigger定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delaynumber | object
默认值:0
data-delay延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:
{ show: 500, hide: 100 }
containerstring | false
默认值:false
data-container向指定元素追加弹出框。
实例: container: 'body'



      <span>测试鼠标点击</span>  
      <a id="colleaguedaohang" target="_blank" >
      <img src="https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a1.png" alt="">  
      </a> 

$(function(){

       var colleaguestring="<ul id='sss' style='width: 220px;top: 40px;'>"  
       +"<a style='margin-left:-20px;'><img src='/dmsd-itoo-video-web/images/tv.png'/></a>"  
        +"<a id='09' href='javascript:void(0);' onclick='findVideoByCollege('物理与电子信息学院')'>  物理与电子信息学院 </a>"  
        +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
        +"<a style='margin-left:-20px;'><img src='/dmsd-itoo-video-web/images/tv.png'/></a>"  
        +"<a id='13' href='javascript:void(0);' onclick='findVideoByCollege('建筑工程学院')'>  建筑工程学院</a>"  
        +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
        +"<a style='margin-left:-20px;'><img src='/dmsd-itoo-video-web/images/tv.png'/></a>"  
        +"<a id='07' href='javascript:void(0);' onclick='findVideoByCollege('教育学院')'>  教育学院</a>"  
        +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
        +"<a style='margin-left:-20px;'><img src='/dmsd-itoo-video-web/images/tv.png'/></a>"  
        +"<a id='01' href='javascript:void(0);' onclick='findVideoByCollege('文学院')'>  文学院</a>"  
        +"<hr style='width:100%;border-top:1px solid #D5D5D5; margin-top: 2px;margin-left:-20px;'>"  
        +"</ul>";  

   $("#colleaguedaohang").popover({   
       trigger:'click',       //触发方式  
       placement : 'bottom',    

       title:'<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> </div>',  
       html: 'true',   
       content : colleaguestring,  //这里可以直接写字符串,也可以 是一个函数,该函数返回一个字符串;  
       animation: false  
   }) 

}












阅读更多
博主设置当前文章不允许评论。

博主推荐

换一批

没有更多推荐了,返回首页