It’s been a long time since I wrote a blog, maybe I’m lazy, emmm. . .
I received a new request a few days ago, and there is a very interesting pop-up window. Come here to share with you. If Vue is used, it may be directly written in many frameworks. Our framework is an older Angular2+Bootstrap framework. To be honest. I don't have a deep understanding of this. If you don’t gossip, let’s take a look at this interesting little pop-up function.
The demand is like this.
We mainly focus on this detail. The demand is like this:
1) When there are more than 3 texts in the text box, *...details* is displayed. This detail may appear multiple times on this page.
2) When clicking on the details A pop-up box prompts the name of the area
other than these 3 places. 3) When you click another location or click another detail, cancel the pop-up display. If you click another detail, the meaning of 2) will be displayed above the other detail.
What about this demand? Actually nothing. Just find a component and add it to the display (naive, there is no bullet frame of this style and function in this), and I am forced to write it myself.
On the code and briefly talk about my ideas
<div class="modal fade" id="delreason1" tabindex="-1" role="dialog" data-backdrop="static" ng-click="hidetriangle()">
<div class="modal-dialog" role="document" style="width: 1000px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" >×</button>
<h4 class="modal-title" id="myModalLabel_update" style="text-align: center">上架中介管理</h4>
</div>
<div class="modal-body">
<fieldset>
<div class="ibox-content track-fieldset-top">
<div style="overflow-y:scroll">
<table class=" table-striped table tablee">
<thead>
<tr>
<th class="wid100">中介总公司名称</th>
<th class="wid100">业务区域</th>
<th class="wid100">中介总公司编码</th>
<th class="wid100">机构授权</th>
<th class="wid100">协议状态</th>
<th class="wid100">操作</th>
</tr>
</thead>
<tbody class="scrollstyle">
<!-- ng-repeat="propo in list" -->
<tr ng-repeat="propo in selectEditList1">
<td class="wid100 text_center">{
{
propo.PARTNERNAME}}</td>
<td class="wid100 text_center positionRelative">
{
{
getAreaname(propo.AREANAME,index)}}
<span class="positionAbsolute" ng-class="'tri'+[$index]" ng-mouseover="mouseover()" ng-mouseout="mouseout()">
<span ng-click="triangleShow(propo.AREANAME,$index)" ng-if="tri"+$index>...详情</span>
//弹框部分 <div class="positionAbsolute" style="left:-76px;">
// <div class="triangleBox">
// <div ng-click="triangleHide()" class="close1">×</div>
// <div class="triangleitem">
// <div ng-repeat="triangle in triangleList">{
{triangle.code}}</div>
// </div>
// </div>
// <div class="triangle-down"></div>
// </div> 弹框部分
</span>
<span style="visibility:hidden;" ng-if="tri"+index>...详情</span>
</td>
<td class="wid100 text_center">{
{
propo.COMPANY_CODE}}</td>
<td class="wid100 text_center">{
{
propo.ORGEMPOWER}}</td>
<td class="wid100 text_center">{
{
propo.AGREEMENTSTATUS}}</td>
<td class="wid100 text_center">
<a class="btn btn-link btn-xs ng-binding ng-scope" ng-click="accreditDetials(propo,0)">授权管理</a>
</td>
</tr>
</tbody>
</table>
</div>
<tfoot>
<tr>
<td colspan="90%">
<uib-pagination total-items="bigTotalItems2" ng-model="bigCurrentPage2" max-size="maxSize2" items-per-page="maxPage2"
boundary-link-numbers="true" force-ellipses="true" previous-text="<" next-text=">" ng-change="jumpToPage2()"
class="pull-right">
</uib-pagination>
</td>
</tr>
</tfoot>
</div>
</fieldset>
</div>
</div>
</div>
//css
/* 三角箭头 */
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #000;
position: absolute;
top: -8px;
right: 6px;
}
.positionAbsolute{
position: absolute;
}
.triangleBox{
position: absolute;
width: 80px;
height: 100px;
background: #000;
color: #fff;
border-radius: 5px;
top: -108px;
right: -30px;
}
.close1{
text-align: right;
margin-right: 9px;
cursor: pointer;
}
.triangleitem{
overflow: auto;
height: 100px;
}
//优化滚动条样式
.scrollstyle ::-webkit-scrollbar{
width:5px;}
.scrollstyle ::-webkit-scrollbar-track{
background-color:#000;}
.scrollstyle ::-webkit-scrollbar-thumb{
background-color:transparent;}
</style>
The above is the html code block, and part of it is code comments. I also put it up directly, so that everyone can see it. Originally, I wrote the comment directly, and then I planned to generate more than one, and then I wanted to judge the display when I clicked, but later, because of the writing requirements 3) When I clicked on another location or clicked on another detail, I canceled this The pop-up box shows that if I click on another detail, the meaning of 2) is displayed above the other detail. I found that if I write this way, more problems will occur. So I gave up. This part of the code is written into js and dynamically generated.
//详情显示与弹窗动态显示
$scope.triangleShow = function (areaname,index) {
//由于我们需要在弹框的时候，判断是否有弹框存在，如果存在我们需要先隐藏弹框然后才能在你所点击的地方显示新的弹框
if(document.getElementsByClassName('triangleshow')[0] != undefined){
triangleHide();
}
//动态创建弹框
//在这里可能有人会质疑你怎么不用``（模板字符串）拼接呢？多简单。（这里不可以使用不支持，他会将你的模板字符串中的内容变成字符串输出）所以只能动态生成了
const div = document.createElement('div');
div.setAttribute('style', ['position:absolute','left:-76px']);
div.className = 'triangleshow'
div.onmouseout = function(){
mouseout();
}
div.onmouseover = function(){
mouseover();
}
const div1 = document.createElement('div');
div1.className ='triangleBox';
const div2 = document.createElement('div');
div2.innerHTML = 'x';
div2.className = 'close1'
div2.onclick = function(){
triangleHide()
}
const div3 = document.createElement('div');
div3.className = 'triangleitem'
const div4 = document.createElement('div');
div4.className = 'triangle-down'
//arealist 使我们需要处理的数据，去掉前3个数据，将其与的数据进行显示
var arealist = [];
arealist = areaname.split(',');
for(var i =3;i<arealist.length;i++){
const div = document.createElement('div');
div.innerHTML = arealist[i];
div3.appendChild(div);
}
//这里我们没有append div2。这是一个关闭的小按钮（类似于我们弹框中的x号），因为本需求不需要关闭按钮所以去掉了。
// div1.appendChild(div2)
div1.appendChild(div3)
div.appendChild(div1)
div.appendChild(div4)
var tri = 'tri'+index;
document.getElementsByClassName(tri)[0].appendChild(div);
}
$scope.mouseplace =true;
$scope.mouseout = function(){
$scope.mouseplace =true;
}
$scope.mouseover=function (){
$scope.mouseplace =false;
}
//点击其他位置隐藏弹框的方法
$scope.hidetriangle = function($event){
//mouseplace 这个字段呢，是我用来判断我点击其他地方的时候，如果鼠标的位置不在弹出框上，隐藏弹框，如果在，隐藏弹框的方法就不会执行
if($scope.mouseplace && document.getElementsByClassName('triangleshow')[0] != undefined){
document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
}
}
//隐藏弹框方法
function triangleHide(index){
document.getElementsByClassName('triangleshow')[0].parentNode.removeChild(document.getElementsByClassName('triangleshow')[0])
}
//本方法为后端返回数据为“西北,内蒙古,华东地区,华南区域,华北区域”这样的字符串。我们需要自己判断是否显示详情
$scope.getAreaname = function(areaname,index){
var arealist = [];
arealist = areaname.split(',');
if(arealist.length > 3){
var tri = 'tri'+index;
$scope.tri = true;
return arealist[0]+','+arealist[1]+','+arealist[2];
}else{
var tri = 'tri'+index;
$scope.tri = false;
return areaname;
}
}
If you have any better suggestions or methods, please leave a message ☺