【angular】遮罩效果实现

想弄遮罩效果已经很长时间了，但是一直没有做，前几周看见倩倩的博客感觉挺棒的，所以就试了试，成功了之后记录一下吧：

参照使用bootstrap的js插件，使用modals来实现遮罩效果。

官网 http://v3.bootcss.com/javascript/#modals

首先在htlm中添加一个带id 的隐藏按钮：

<!-- 点击 解除绑定 为考试解除资源 -->
<button id='forShowSingleDatumBtnId' type="button" data-toggle="modal" data-target="#singleDatumId"style="visibility:hidden"></button>

注意添加data-toggle=“model”,data-target为弹出框的id，这个按钮的id用于关闭弹框

弹框

<!-- 点击 解除绑定 为考试解除资源 -->
<div #unbingDatumModal class="modal-dialog" (click)="draggable()" role="dialog" draggable="true" data-backdrop="static"style="visibility:hidden;position:absolute;left:30%;top:20% " id="singleDatumId">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" (click)="closeSingleDatum(unbingDatumModal)">x
      </button>
    </div>
    <div class="modal-body">
      <!-- 显示资源信息 -->
      <data-table [title]='singledatumTitles' [addButton]="btnAddSingleDatum" [editButton]="btnEditSingleDatum" [deleteButton]="btnDeleteSingleDatum" [arr]="arrSingleDatum" [buttonList]="singleDatumbuttonList" [sizeList]="singleDatumSizeList" [pagination]="singleDatumNoPage" [isCheckBox]="singleDatumCheckBox" [data]="singleDatumData" (operat)="operatSingleDatum($event)" >
      </data-table>
    </div>
  </div>
</div>

点击“x”关闭弹窗时，因为遮罩还在，所有通过id点击事件去除遮罩：

// 关闭
  closeSingleDatum(el: HTMLElement) {
    el.style.visibility = 'hidden';
    document.getElementById("forShowSingleDatumBtnId").click();
  }

点击“解除绑定”检查是否有资源，有的话，将资源赋给弹出框并设置为可见，点击上面那个隐藏的按钮，弹出框和遮罩就一起出来辣，如果没有出来的话，需要设置一下css：

.modal-dialog{ z-index: 9998; }

为了查看效果是有判断是否有资源时直接设置为true

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!