Is there any other way to display dialogue box dynamically

user_8681801 0
Viewed 36

I have taken model to display the content on the click of button(). I have already created the code and my modal is also working fine. But I want it to display like Alert box at the top corner of my window, when i click on the button(). I tried my best to do it. But hopefully, I couldn't continue further.

My plunker : https://plnkr.co/edit/MgGSEU4ZSsmF36mSLW8Y?p=preview

Here you can check it out.

angularjs javascript
2 Answers

The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. It can be used to display alert popups, videos, and images in a website.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Above code is from: LINK

Explanation of above code:

  1. Bootstrap has build in modal and modal-dialog class which displays popup window.
  2. Further you can divide your popup window in sections. That in done in above code.
  3. In above code there are three sections that are added. There are: header, body and footer.
  4. Based on your need you can divide modal into any number of sections.

If not bootstrap you can do same in JQuery as well: LINK

user_37330260

If you're interested in a solution that's more AngularJS-like, take a look at the ngDialog service. It will allow you to inject dialog capabilities into any controller that needs it. Additionally its openConfirm method will return a promise that will be resolved or rejected based on how the dialog was closed (perfect for your example which appears to be a confirm / cancel dialog).

app.controller('demo', ['$scope', 'ngDialog', function($scope, ngDialog) {
  $scope.openDialog = function() {
    ngDialog.openConfirm({
      templateUrl: 'dialog-template.html',
      scope: $scope
    }).then(function () {
      console.log('confirm');
    }).catch(function () {
      console.log('cancel');
    })
  }
}])

Here's a fork of your plunk using ngDialog to create a confirm / cancel dialog that is aligned to the upper right side of the screen.

Updated Plunk using ngDialog

ngDialog GitHub repository and instructions

user_58292620
Related