AngularJS Simple Example

by megaadriano

HTML

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gasparesganga/[email protected]/src/popupwindow.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gasparesganga/[email protected]/src/popupwindow.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div ng-app ng-controller="LoginController">
    <div id="dv1" style="display:none">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">1</div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">2</div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
        </div>
    </div>
    
    <div id="dv2" style="display:none">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"...

CSS

.custom_style .popupwindow_titlebar_button {
    width           : 25px;
    height          : 20px;
    margin-left     : 4px;
    border          : none;
    
}
.custom_style .popupwindow_titlebar_button_close {
    background-color    : #8b0000;
    stroke              : #393e46;
}
 .custom_style .popupwindow_titlebar_button_close:hover {
        background-color    : #ca3020;
        stroke              : #000000;
    }
    #dv1{
      z-index:0 !important;
    }
    #dv2{
      z-index:1 !important;
    }
    .custom_style {
       z-index:1 !important;
    }

JavaScript

$( document ).ready(function() {
    $('#dv1').PopupWindow("init",{
    title       : "Cadastro",
    modal       : false,
    buttonsTexts    : {
    close           : "Fecha",       // String
    maximize        : "Maximiza",    // String
    unmaximize      : "Restore",     // String
    minimize        : "Minimiza",    // String
    unminimize      : "Exibe",        // String
    collapse        : "Collapse",    // String
    uncollapse      : "Expand",      // String
		},  
    customClass     : "custom_style",
    buttons     : {
        collapse    : false
    },
    left        : 100
});
 $('#dv2').PopupWindow("init",{
    title       : "Cadastro",
    modal       : false,
    buttonsTexts    : {
    close           : "Fecha",       // String
    maximize        : "Maximiza",    // String
    unmaximize      : "Restore",     // String
    minimize        : "Minimiza",    // String
    unminimize      : "Exibe",        // String
    collapse        : "Collapse",    // String
    uncollapse      : "Expand",      // String
		},  
    customClass     : "custom_style",
    buttons     : {
        collapse    : false
    },
    left        : 10
});
  $( "#dv1" ).on( "click", function() {
   
      
      $( "#dv2" ).css('z-index','2 !important');
      $( "#dv1" ).css('z-index','0 !important');
      console.log($( "#dv1" ).css('z-index'))
  })
});
    
function LoginController($scope) {

    $scope.user = {
        firstName: "Foo",
        lastName: "Bar"
    };
    $scope.logins = [];
    $scope.login = function () {

        $scope.logins.push($scope.user.firstName + " was logged in.");
    };
}