Cara Membuat Animasi Modal Dengan Menggunakan AngularJs

Modal adalah suatu konten berisi informasi atau sebuah form yang muncul ketika kita melakukan klik pada tombol dan dengan posisi paling depan diantara elemen lainnya. Pada artikel ini saya akan membahas tentang Cara Membuat Animasi Modal Dengan Menggunakan AngularJs.

Dimana animasi yang akan saya berikan hampir mirip seperti animasi modal pada bootstrap, yaitu muncul dari atas ke bawah. Untuk struktur htmlnya saya masih akan menggunakan bootstrap dan untuk animasi modal saya menggunakan angularjs. Dan berikut ini struktur htmlnya.

<!DOCTYPE html>

<html >

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<style>

.bg-modal{

                background: rgba(0,0,0,0.5);

}

</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

  <div class="container">

     <div class="row">

       <div class="col text-center">

          <button class="btn btn-primary" ng-click="open()">Open Modal</button>

       </div>

     </div>

  </div>

 

  <div class="modal {{display}} {{bg}}" tabindex="-1" role="dialog">

    <div class="modal-dialog" role="document" style="top: {{tp}}px !important">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title">Modal title</h5>

          <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="close()">

            <span aria-hidden="true">&times;</span>

          </button>

        </div>

        <div class="modal-body text-center">

          <h4>Cara Membuat Animasi Modal Dengan Menggunakan AngularJs</h4>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

          <button type="button" class="btn btn-primary">Save changes</button>

        </div>

      </div>

    </div>

  </div>

</body>

</html>

Jika sudah kita akan membuat script angularjs untuk menampilkan modal dan memberikan animasi terhadap modalnya dengan menggunakan $timeout seperti berikut ini.

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {

    var timer = function() {

        if( $scope.tp<=0 ) {

            $scope.tp += 5;

            $timeout(timer,1);

        }

    }

    $scope.open = function() {

                $scope.tp= -237;

                $scope.display = "d-block";

                $scope.bg = "bg-modal";        

                $timeout(timer, 1);

    }

    // $timeout(open, 1000);

    $scope.close = function() {

      $scope.display = "d-none";

      $scope.bg = "";

    }

});

</script>

Untuk membuat animasi modal di atas, saya menggunakan $timeout untuk menambahkan jarak top modalnya terus-menurus sampai nilainya menjadi 0px. Dan jika dibuka di browser, maka akan seperti pada gambar di bawah ini.

Cara Membuat Animasi Modal Dengan AngularJs

Demikian artikel tentang Cara Membuat Animasi Modal Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

20 Februari 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat