Question

我有一个html页面，主要说2个div。在第一个div中我有一个登录按钮，当点击它时应该在第二个div上打开一个重叠的帧。

例如，您可以在此处看到https://beta.ryanair.com/gb/en/，当点击myRyanair按钮时，框架会越过第二个div，然后再次点击时会返回。

我是html / angular的新手，正在尝试一些事情，如果听起来太天真，请原谅我。

以下是我的HTML代码： -

  <!DOCTYPE html>
   <html lang="en" ng-app="musicPlayer">
   <head>
   <meta charset="UTF-8">
   <title>

   </title>
  <link rel="stylesheet" type="text/css" href="home.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
   <script type="text/javascript" src="angular-js.js"></script>
</head>
<body ng-controller="MusicPlayer as music">
<div id="div1">
    <first-tab></first-tab>
    <div ng-include="music.displayLoginPage()"></div>
</div>
<div id="div2" >

    Search Bar
</div>
<div id="div3">div3</div>

</body>
</html>

以下是我的js代码： -

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


  app.controller('MusicPlayer',function(){
  var self=this;
  self.loginPageDisplay=0;
  self.setLoginPage=function(){
    if(self.loginPageDisplay === 0){
        self.loginPageDisplay=1;
    }
    else
    {
        self.loginPageDisplay=0;
    }
  }
  self.displayLoginPage=function(){
    if(self.loginPageDisplay===1){
        return 'loginPage.html';
    }
    return '';
   }
});

  app.directive('firstTab',function(){
   return{
    restrict:'E',
    controller:'MusicPlayer',
    controllerAs:'music',
    replace:true,
    templateUrl:'firstTab.html'
  }
})

以下是我在指令

中使用的firstTab.html

 <div>
   <div id="nameOfSite">
    <h1>GrooveHunt</h1>
   </div>
    <div class="loginKeys">
     <a href="" style="color: white" ng-click="music.setLoginPage()">Login</a>
    <a href="" style="color: white" id="signUp">Sign Up</a>
   </div>
  </div>

以下是我在点击登录时插入html的loginpage.html

 <div id="loginPage">
  <div>
   Do u have liking for music sign up now?
   </div>
   <div>
   </div>
 </div>

以下是css： -

       #div1{
           height:10vh;
       background-color: darkblue;

       }
       #div2{
           height:60vh;
       background-color: white;
       }
       #div3{
           height:30vh;
       background-color: darkblue;
       }
       #nameOfSite{
           color: white;
           float: left;
           font-size:15px;
       }
       .loginKeys{
           margin-left:85%;
           font-size:22px;
       }
       #signUp{
           margin-left:20px;
       }
       #loginPage{
           border:2px solid darkblue;
           width: 100%;
           height:200px;
           background-color: red;
       }

在html

0 个答案: