как исправить положение элемента и сделать его отзывчивым - PullRequest
Новая
       3

как исправить положение элемента и сделать его отзывчивым

3 голосов
/ 14 апреля 2020

У меня есть html, css и js: 

$(document).ready(function() {
  $('#friends-chats-noti-button').on("click", function(e, data) {
    // TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
    $('#friends-chats').fadeToggle('fast', 'linear', function() {
      if ($('#friends-chats').is(':hidden')) {}
    });
  });
});
 /* friends chats */
#friends-chats-container {
    position:relative;
    margin-right:10px;
    margin-left:10px;
}

/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
    width:22px;
    height:22px;
    line-height:22px;
    cursor:pointer;
}

/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
    display:none;
    width:900px;
    top:55px;
    right:10%;
    background:#FFF;
    border:solid 1px rgba(100, 100, 100, .20);
    -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
    z-index: 1000;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #fff;
    margin-top:-20px;
    margin-left:345px;
}

#friends-chats:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #fff;
    margin-top:-20px;
    margin-left:870px;
}

.messaging { padding: 0 0 50px 0;}
.msg_history {
  height: 516px;
  overflow-y: auto;
}

#chat-message-input-private
{
  margin: 1% 0 1% 1%;
  width: 80%;
  height: 68px;
  font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav navbar-right">
    <li id="friends-chats-container">

      <div id="friends-chats-noti-button">
        <i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
      </div>

      <div>
        <p> other element </p>
      </div>

      <div id="friends-chats">
        <div class="container">
          <h3 class=" text-center">Messaging</h3>
          <div class="messaging">
            <div class="inbox_msg">
              <div class="inbox_people">
                <div class="headind_srch">
                  <div class="recent_heading">
                    <h4>Recent</h4>
                  </div>
                </div>
                <div class="inbox_chat" id="inbox_chat">

                </div>
              </div>
              <div class="mesgs">
                <div class="msg_history" id="msg_history">

                </div>

                <div class="inputContainer">
                  <input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
                </div>

              </div>
            </div>
          </div>
          <!---->
        </div>
      </div>
    </li>
  </ul>
</nav>

<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>

Как видите, в правом верхнем углу страницы есть значок сообщения.

что я хочу get -

  1. , если щелкнуть значок сообщения, появится окно сообщения, которое не повлияет на положение другого элемента.

  2. при сужении окно, окно сообщения может быть отзывчивым.

Я уже пробовал несколько часов, но все еще не получил хороший результат, пожалуйста, помогите мне. спасибо всем.

1 Ответ

1 голос
/ 14 апреля 2020

Я думаю, что вы забыли добавить строку position: abosolute; Я добавил ее для вас здесь. И я сделал всплывающее окно меньше, чтобы вы могли четко видеть 

$(document).ready(function() {
  $('#friends-chats-noti-button').on("click", function(e, data) {
    // TOGGLE (SHOW OR HIDE) NOTIFICATION WINDOW.
    $('#friends-chats').fadeToggle('fast', 'linear', function() {
      if ($('#friends-chats').is(':hidden')) {}
    });
  });
});
 /* friends chats */
#friends-chats-container {
    position:relative;
    margin-right:10px;
    margin-left:10px;
    padding: 0 15px;
}

/* A CIRCLE LIKE BUTTON IN THE TOP MENU. */
#friends-chats-noti-button {
    width:22px;
    height:22px;
    line-height:22px;
    cursor:pointer;
}

/* THE NOTIFICAIONS WINDOW. THIS REMAINS HIDDEN WHEN THE PAGE LOADS. */
#friends-chats {
    display:none;
    width:600px;
    top:55px;
    right:10%;
    background:#FFF;
    border:solid 1px rgba(100, 100, 100, .20);
    -webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .20);
    z-index: 1000;
    position: absolute;
}
/* AN ARROW LIKE STRUCTURE JUST OVER THE NOTIFICATIONS WINDOW */
#notifications:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #fff;
    margin-top:-20px;
    margin-left:345px;
}

#friends-chats:before {
    content: '';
    display:block;
    width:0;
    height:0;
    color:transparent;
    border:10px solid #CCC;
    border-color:transparent transparent #fff;
    margin-top:-20px;
    margin-left:870px;
}

.messaging { padding: 0 0 50px 0;}
.msg_history {
  height: 516px;
  overflow-y: auto;
}

#chat-message-input-private
{
  margin: 1% 0 1% 1%;
  width: 80%;
  height: 68px;
  font-size: 18px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
  <ul class="nav navbar-nav navbar-right">
    <li id="friends-chats-container">

      <div id="friends-chats-noti-button">
        <i class="fa fa-comments-o fa-2x" aria-hidden="true"></i>
      </div>

      <div>
        <p> other element </p>
      </div>

      <div id="friends-chats">
        <div class="container">
          <h3 class=" text-center">Messaging</h3>
          <div class="messaging">
            <div class="inbox_msg">
              <div class="inbox_people">
                <div class="headind_srch">
                  <div class="recent_heading">
                    <h4>Recent</h4>
                  </div>
                </div>
                <div class="inbox_chat" id="inbox_chat">

                </div>
              </div>
              <div class="mesgs">
                <div class="msg_history" id="msg_history">

                </div>

                <div class="inputContainer">
                  <input id="chat-message-input-private" autocomplete="off" placeholder="Type your message...">
                </div>

              </div>
            </div>
          </div>
          <!---->
        </div>
      </div>
    </li>
  </ul>
</nav>

<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
<div>some element</div>
...