Question

我有一个“弹出”通知，需要在调整屏幕大小时移动。我有这种样式，可以放置并制作通知框：

<style>
    .ajax-dropdown
    {position:absolute;
     display:none;
     z-index:905;
     top:48px;
     left:80%;
     width:280px;
     height:435px;
     border-radius:0;
     -webkit-border-radius:0;
     -moz-border-radius:0;
     -webkit-box-shadow:0 2px 4px rgba(30,30,100,.25);
     -moz-box-shadow:0 2px 4px rgba(30,30,100,.25);
     box-shadow:0 2px 4px rgba(30,30,100,.25);
     padding:10px;
     background:#fff;
     border:1px solid #b3b3b3}
</style>

然后我调用一个在通知框中填充数据的操作：

<div id="logo-group" style="background-color:white !important" class="btn-header pull-right">
   @if (Request.IsAuthenticated)
   {
       @Html.Action("GetNotifications", "Notifications")
   }
</div>

以上操作称为此局部视图，该视图拉出要显示的数据：

@model Innovation_Cafe.ViewModels.NotificationListViewModel

<span id="activity" class="activity-dropdown"> <i class="fa fa-user"></i> <b class="badge"> @Model.NotificationCount </b> </span>

<!-- AJAX-DROPDOWN : control this dropdown height, look and feel from the LESS variable file -->
<div class="ajax-dropdown">
    <!-- the ID links are fetched via AJAX to the ajax container "ajax-notifications" -->
    <div class="btn-group btn-group-justified" data-toggle="buttons">

        <label class="btn btn-default">
            <input type="radio" name="" value="notifications" @*id="~/content/ajax/notify/notifications.html"*@>
            notifications @*(6)*@
        </label>
    </div>

    <!-- notification content -->
    <div class="ajax-notifications custom-scroll">
        @Html.Partial("_notifications", Model)
    </div>
</div>
<!-- END AJAX-DROPDOWN -->

因此，我按照第一部分代码中所述的方式进行了操作，因此我可以调整大小，重新放置它，但是我不知道如何使它在所有项目中“移动”屏幕已调整大小。

我尝试将其放在media标记的旁边，但似乎不起作用。：

@@media only screen and (max-width : 960px) {

}

如果有人能在正确的方向上帮助我，我将不胜感激。

随屏幕调整HTML大小而移动的通知框

0 个答案: