Create a window like in GMAIL


I'm making a button that when clicked shows a low window, like GMAIL:

I get the idea of showing it, but I can not align it in such a way that it looks like the image. This is my code:

$(document).ready(function() {
  $('.boton_ventana').on('click', function() {
    if ($('.ventana_flotante').css('display') == 'block') {
        "border-bottom": "3px solid #ff676d"
        "font-weight": "bold"
    } else {
        "border-bottom": "0"
.contenedor_boton {
  width: 100px;
  margin-left: 500px;
  float: right;
  right: 100px;
  position: relative;

.btn:hover {
  border-bottom: 2px solid #ff676d;

.boton:focus {
  outline: none;

.ventana_flotante {
  background: none repeat scroll 0 0 #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
  padding: 10px 0 0;
  position: fixed;
  text-align: center;
  width: 250px;
  height: 250px;
  z-index: 15;
  top: 125px;
  cursor: pointer;
  display: none;
<script src=""></script>
<link rel="stylesheet" href="" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
  <div class="contenedor_boton col-auto">
    <div class="boton_ventana">
      <button type="button" class="btn btn-default boton">Cliente</button>
    <div class="ventana_flotante">
      <div class="caja">
asked by JiMel 16.11.2018 в 17:43

1 answer


what you can do is use the bootstrap drop-down and using row, col, justify-content and some more styles you can align it as you wish ♥

answered by 16.11.2018 / 18:09