鼠标移上显示 ( 自定义内容 ) 弹出框
方法一：介绍bootstrap组件Popover弹出框自定义内容的方法
Popover的常用参数以及使用方法可以详见 http://www.runoob.com/bootstrap/bootstrap-popover-plugin.html
要实现如图所示效果：
1：引入样式和js文件
<link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script> <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js">script>
2：html代码
<body><a class="btn btn-lg btn-danger" role="button">弹出框2a><a class="btn btn-lg btn-success" role="button">弹出框3a> body>
3：js代码
$(function () {$('a').each(function () {var element = $(this);var txt = element.html();element.popover({trigger: 'manual',placement: 'auto', //top, bottom, left or right// title: txt,html: 'true',content: ContentMethod(txt),}).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);});});});function ContentMethod(txt){return '弹出框';};
缺点就是，此方法自定义的弹出框的内容是用js拼成的html代码，当需要显示的内容比较多的时候页面加载起来比较慢，js代码看起来也会比较杂乱冗余。
方法二：简单的逻辑：试用相对定位控制对应元素的显示隐藏
1：html代码
<table><tbody><tr><td class="same-name"><a href="javascript:;" data-id="">= $v['order_sn'] ?>a><div class="order-goods" id="order_goods_layer">div>-显示的内容->td>...tr><tr><td class="same-name"><a href="javascript:;" data-id="">= $v['order_sn'] ?>a><div class="order-goods" id="order_goods_layer">div>-显示的内容->td>...tr><tr><td class="same-name"><a href="javascript:;" data-id="">= $v['order_sn'] ?>a><div class="order-goods" id="order_goods_layer">div>-显示的内容->td>...tr>tbody>table>
2：js代码
$(document).ready(function(){var t;$('.same-name i').mouseover(function() {var url = '';var order_id = $(this).data("id");var get_data = {'order_id':order_id};$.getJSON(url, get_data, function(data) {if (data.code == 1) {$('.same-name span').empty();$('.same-name span').html(data.data);} else {alert(data.msg);}});$('.same-name span').hide();$(this).siblings('span').show();});$('.same-name i').mouseout(function() {t = setTimeout(yc(),1000);function yc(){$('.same-name span').hide();};});$('.same-name span').mouseover(function() {clearTimeout(t);$(this).show();});$('.same-name span').mouseout(function() {$(this).hide();});})
这个方法的缺点：不能根据鼠标触发的位置来自定义提示框的位置，当鼠标触发屏幕底部的几个元素来弹出对应提示框，并且提示框内容相对比较多显示的
时候超出整个div范围导致页面出现滚动条，这时的体验就非常不好，可能会出现页面抖动等情况，那怎样实现像插件里面那样能根据触发位置自适应弹出框的位置呢？
我试了两个方法：
1：根据判断页面是否出现滚动条，来修改弹出框的位置（向上弹出/向下弹出），但是此方法也有漏洞，因为是先判断有无滚动条再决定弹出框的位置，
那就是说出现滚动条的时候就会有页面的抖动，事实证明不可行。
2：根据判断 鼠标触发的元素到屏幕底部的距离 来决定弹出框的位置，此方法暂时未发现问题，所以上面代码更新为：
function mouseover_init(){var t;var w_h = $(window).height(); //获取屏幕的高度$('.cl-order-sn a').mouseover(function() {var url = '';var order_id = $(this).data("id");var get_data = {'order_id':order_id};$.getJSON(url, get_data, function(data) {if (data.code == 1) {$('.cl-order-sn .order-goods').empty();$('.cl-order-sn .order-goods').html(data.data);} else {alert(data.msg);}});var a_h_t = $(this).offset().top - $(window).scrollTop(); //获取触发元素到顶部的距离var a_h_b = w_h - a_h_t; //触发元素到底部的距离if (a_h_b < 250) {$('.cl-order-sn .order-goods').hide();$(this).siblings('.order-goods').addClass('position_b').removeClass('position_t').show();} else{$('.cl-order-sn .order-goods').hide();$(this).siblings('.order-goods').addClass('position_t').removeClass('position_b').show();};});$('.cl-order-sn a').mouseout(function() {t = setTimeout(yc(),1000);function yc(){$('.cl-order-sn .order-goods').hide();};});$('.cl-order-sn .order-goods').mouseover(function() {clearTimeout(t);$(this).show();});$('.cl-order-sn .order-goods').mouseout(function() {$(this).hide();});};
方法三：webui-popover插件，它兼容bootstrap但并不依赖于bootstrap
doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" /><title>基于Bootstrap的轻量级弹出提示框插件title><link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.css">
head>
<body><table><thead><tr><th>订单号th><th>名称th><th>状态th>tr>thead><tbody><tr><td><a href="#" class="show-pop-table" data-placement="auto">123456789a>td><td>【破损】天衡宝 甜薯三文鱼无谷犬粮(细颗粒) 4.5磅td><td>正常td>tr><tr><td><a href="#" class="show-pop-table" data-placement="auto">123456789a>td><td>【破损】天衡宝 甜薯三文鱼无谷犬粮(细颗粒) 4.5磅td><td>正常td>tr>tbody>table><div id="tableContent" style="display:none;"><table class="table"><thead><tr><th>#th><th>First Nameth><th>Last Nameth><th>Usernameth>tr>thead><tbody><tr><td>1td><td>Marktd><td>Ottotd><td>@mdotd>tr><tr><td>2td><td>Jacobtd><td>Thorntontd><td>@fattd>tr><tr><td>3td><td>Larrytd><td>the Birdtd><td>@twittertd>tr>tbody>table>div>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.jsdelivr.net/jquery.webui-popover/1.2.1/jquery.webui-popover.min.js">script>
<script>(function(){var tableContent = $('#tableContent').html();$('a.show-pop-table').webuiPopover({content: tableContent,trigger: 'hover',width: 500,multi: true,placement: 'auto',padding: true,delay: 300,closeable: false,style: ''});})();
script>
body>
html> 另外还有异步加载模式，具体API请查看网址http://www.jcodecraeer.com/a/javascript/2016/1003/6656.html
转载于:https://www.cnblogs.com/moumou0213/p/6406465.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！