利用Angularjs和原生JS分别实现动态效果的输入框,AngularJS中使用ngModal模态框实例

在刚初步并未有给输入框增多大旨以前,未有其他效能。见下图:

在AngularJS中运用模态框需求引用的文件:

本文实例呈报了Angular2.0完成modal对话框的办法。分享给大家供我们参谋,具体如下:

图片 1

  1. angular.js 1.5.5
  2. ui.bootstrap-tpls.js 0.11.2
  3. bootstrap.css 3.3.7

感觉写的可比奇妙的正是样式的抉择~记录下

下一场点击个中任何二个,主题就能接触三个卡通,动画的结果见图二:

内需小心版本要平等,高版本的不扶助这种办法,会出错

CSS部分

图片 2

将要求弹出的模态框的内容写在 script 标签中,指明属性,放在页面中

.font {
 font-family: "Microsoft YaHei", Arial;
 font-size: 12px;
 color: #333333;
}
.ky-modal-content {
 min-width: 520px;
 min-height: 240px;
}
.ky-modal-header {
 /*height : 40px;*/
 padding: 0 10px 0 10px;
}
.ky-modal-title {
 font-size: 16px;
 font-weight: 100;
}
.ky-modal-body {
 min-height: 110px;
 text-align: center;
}
.ky-modal-footer {
 height: 30px;
 border-top: 0;
 text-align: -webkit-center;
}
.ky-modal-message {
 padding-left: 3px;
 vertical-align: middle;
}
.ky-modal-icon {
 font-size: 16px;
 vertical-align: middle;
}
.ky-modal-question-icon {
 color:#ff8000;
}
.ky-modal-check-icon {
 color:green;
}
.ky-modal-exclamation-icon {
 color:red;
}
.ky-modal-close {
 outline: none;
 font-size: 30px;
 margin-top: 8px;
 font-weight: 100;
 vertical-align: -webkit-baseline-middle;
}
.vertical-align-center {
 display: flex;
 display: -webkit-box;
 display: -moz-box;
 -webkit-box-align: center;
 -moz-box-align: center;
 text-align: -webkit-center;
}

中级的输入登陆密码文字,会自行增加到顶端(原谅作者未有截取到动画进度的图形)。

<script type="text/ng-template" id="modal.html"> 
<div>
  <div class="modal-header">
    <h3 class="modal-title" align="center">
      标题信息
    </h3>
  </div>
  <div class="modal-body">
    <div align="center">
      模态框内容
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      确认
    </button>
    <button class="btn btn-warning" ng-click="cancel()">
      退出
    </button>
  </div>
</div>
</script>

HTML部分

网站地图xml地图