彈出通知面板框不在右側

我正在構建一個簡單的vertical notification panel類似stack overflow通知面板但是彈出視窗沒有保持在右側，當我減半時browser window它作業正常但是當我使瀏覽器視窗充滿時然后Pop-up將向左，我的意思是，彈出框是不要停留在打開按鈕所在的右側。

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
   // $(".myProfile").removeClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});

.myNavbar .profile_dd,
.notification_dd{
  right: -150px;
  max-width: -20px;
  background-color: red;
  padding: 2em;
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
}

.myNavbar .navbar_left .logo a{
    font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 550px;
}

@media all and (max-width: 1200px) {
    .myNavbar .navbar_right .myNotificatio {
        margin-right: 550px;
    }
}



.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css 
        " crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="myNavbar">
  <div class="navbar_right">
    <myDiv class="myNotification" id="Notif">
      <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

      <div class="notification_dd">
        This is Notification
      </div>
    </myDiv>
  </div>
</div>

我試過什么？:-

我也試過：-

@media screen and (max-width: 650px) {
  .notification_dd {
    right: -150px;

  }
}

但它也將離開。

我想做什么？:-

我正在嘗試使彈出通知穩定在按鈕正下方，并且不會更改為左側。

任何幫助將非常感激。謝謝你

編輯 ：-

如您所見，問題未顯示在snippet但您可以在您的機器上嘗試。

uj5u.com熱心網友回復：

你可以試試這個代碼，它可能對你有用。

$(".myNotification .icon_wrap").click(function(){
  $(this).parent().toggleClass("active");
   // $(".myProfile").removeClass("active");
});

$(".show_all .link").click(function(){
  $(".myNotification").removeClass("active");
  $(".popup").show();
});

$(".close, .shadow").click(function(){
  $(".popup").hide();
});

$(".myB").click(function(){
  $(".myNotification").removeClass("active");
});

.myNavbar .profile_dd,
.notification_dd{
  right: 0px;
  background-color: red;
  padding: 2em;
  width: 350px;
  height: auto;
  display: none;
  position: absolute;
}

.myNavbar .navbar_left .logo a{
    font-family: 'Trade Winds';
   font-size: 20px;
}

.myNavbar .navbar_right{
   display: flex;
}

.myNavbar .navbar_right img{
  width: 35px;
}

.myNavbar .navbar_right .icon_wrap{
  cursor: pointer;
}

.myNavbar .navbar_right .myNotification{
  margin-left: 550px;
  width: 100%;
}

.myNavbar .navbar_right .myNotification .icon_wrap{
  font-size: 28px;
}

.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
  position: relative;
}

.myNavbar .myProfile .profile_dd ul li .btn{
    height: 32px;
    padding: 7px 10px;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    background: #3b80f9;
    width: 125px;
    margin: 5px auto 15px;
}

.myNavbar .myProfile .profile_dd ul li .btn:hover{
  background: #6593e4;
}

.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
  display: block;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css 
    " crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<div class="myNavbar">
    <div class="navbar_right">
        <myDiv class="myNotification" id="Notif">
        <a class="icon_wrap" action=""><i class="far fa-bell"></i></a>

            <div class="notification_dd">
                This is Notification 
            </div>
        </myDiv>
    </div>
</div>

標籤：javascript html 查询 css

上一篇：java畫布隨機顯示不正確的影像

下一篇：如何為電話號碼撰寫僅允許帶加號的號碼的正則運算式？