Скрытый модал не центрируется после появления - PullRequest
0 голосов
/ 25 апреля 2018

Привет, я делаю админ-панель самостоятельно, но столкнулся с проблемой, поэтому у меня есть этот модал, который сначала скрыт, но появляется после того, как я нажимаю кнопку редактирования у строк, НО по какой-то причине, как только модал показывает он не центрирован, он должен быть центрирован, так как контейнер модала использует flexbox со свойствами justify-content и align-items, установленными в центр, вместо этого он отображается в начале потока div. Я попытался использовать margin: auto на модальном, но даже это не работает.

Вот мой код:

$(".edit_button").click(function(){
	$('.edit_modal_overlay_maincontainer').fadeIn(1000);
    });
	
	$(".edit_modal_header_close").click(function(e){
	e.preventDefault();
	$('.edit_modal_overlay_maincontainer').fadeOut(1000);
    });
body{display:flex; flex-direction:column; position:relative; font-family:Open Sans;}

*{box-sizing:border-box; margin:0; padding:0;} 

a{text-decoration:none;}

table, th, td {border: 1px solid rgba(0,0,0,0.2); border-collapse: collapse;}

th, td {padding: 4px 8px;}

th { text-align: left;}

.pointer{cursor:pointer;}

.navbar_maincontainer{width:100%; height:8vh; background-color:#605CA8; display:flex; align-items:center;}

.navbar_logo_container{width:280px; height:100%;  position:relative; display:flex; align-items:center; padding:0px 15px; border-right:1px solid rgba(0,0,0,0.);}

.navbar_gradient{width:100%; height:100%; position:absolute; right:0px; top:0px; background: linear-gradient(to left, rgba(52, 50, 89, 0.7), rgba(52, 50, 89, 0));}

.navbar_logo_part1{z-index:9999999999; font-family:Rubik; font-size:24px; color:#00ffa1;}

.navbar_logo_part2{font-size:23px; color:rgba(255,255,255,0.85);}

.navbar_menu_toggle{font-size:26px; color:rgba(255,255,255,1.0); margin-left:15px;}

.navbar_menu_toggle:hover{color:#2A3F54;}

.navbar_logout_container{width:auto; height:35px; display:flex; align-items:center; margin-left:auto; margin-right:30px; font-family:Open Sans;}

.navbar_logout_icon{font-size:26px; color:rgba(255,255,255,1.0); margin-left:auto; margin-right:5px;}

.navbar_logout_text{font-size:17px; color:rgba(255,255,255,1.0);}

.navbar_logout_container:hover .navbar_logout_icon{color:#2A3F54;}

.navbar_logout_container:hover .navbar_logout_text{color:#2A3F54;}

.admin_maincontainer{width:100%; height:92vh; display:flex;}

.sidebar_maincontainer{overflow-x:hidden; width:280px; height:100%; transition:all 100ms ease; display:flex; flex-direction:column; background-color:#2A3F54; box-shadow:4px 4px 4px rgba(0,0,0,0.3); align-items:center;}

.active_sidebar_maincontainer{width:0px;}

.sidebar_user_container{width:100%; height:90px; display:flex; padding:10px; margin:5px 0px;}

.sidebar_user_image{width:60px; height:60px; border-radius:50%; background-color:#01B271; display:flex;}

.sidebar_user_image_letter{margin:auto; font-size:25px; color:rgba(255,255,255,0.9); font-weight:600;}

.sidebar_user_info_container{width:auto; height:100%; display:flex; flex-direction:column; padding:5px 5px 5px 10px;}

.sidebar_user_info_name{font-size:19px; color:rgba(255,255,255,1.0); font-weight:500;}

.sidebar_user_info_role_container{width:100%; display:flex; height:25px; align-items:center;}

.sidebar_user_info_status{width:7px; height:7px; border-radius:50%; background-color:#3C763D; margin-right:5px;}

.sidebar_user_info_role{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300;}

.sidebar_user_info_last_conection{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300; margin-top:7px;}

.sidebar_search_container{width:90%; height:45px; display:flex; align-items:center; border-radius:11px; background-color:#3A4851; margin-top:20px; margin-bottom:15px; overflow:hidden;}

.sidebar_search_input{width:85%; height:100%; padding:10px; background-color:#3A4851; border:1px solid #3A4851; color:rgba(255,255,255,0.9); font-size:17px;}

.sidebar_search_input:focus {border-color: none;-webkit-box-shadow: none; box-shadow: none; outline: none;}

.sidebar_search_button{width:15%; height:100%; background-color:#3A4851; display:flex;}

.fa-search{font-size:20px; color:rgba(255,255,255,0.9); margin:auto;}

.sidebar_entries_container{width:100%; height:auto; overflow-x:hidden; overflow-y:auto; border-top:1px solid rgba(42,63,84,0.5);}

.sidebar_entry_container{width:100%; height:auto; display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1);}

.sidebar_entry_container:hover{cursor:pointer;}

.sidebar_entry_link_container{width:100%; height:50px; display:flex; align-items:center; padding:10px; position:relative;}

.sidebar_entry_link_container:hover{}

.sidebar_entry_link_icon_container{width:30px; height:100%; display:flex; justify-content:center; align-items:center; margin-right:5px;}

.active_entry{background-color:#1c2a38;}

.sidebar_entry_link_icon{font-size:19px; color:rgba(255,255,255,0.9);}

.sidebar_entry_link_item{font-size:18px; color:rgba(255,255,255,0.9); font-weight:500;}

.sidebar_entry_dropdown_container{width:100%; height:auto; display:flex; flex-direction:column; display:none;}

.sidebar_entry_dropdown_item{width:100%; height:35px; display:flex; transition:all 400ms ease; align-items:center; padding:0px 20px; font-size:14px; color:rgba(255,255,2555,0.9);}

.sidebar_entry_dropdown_item:hover{background-color:#3A4851}

.fa-chevron-right{color:rgba(255,255,255,0.9); font-size:8px; margin-right:10px; transition:all 400ms ease;}

.fa-chevron-down{font-size:14px; color:rgba(255,255,255,0.9); position:absolute; top:50%; transform:translateY(-50%); right:11px;}

.body_maincontainer{width:80%; height:100%; background-color:rgba(0,0,0,0.1); padding:50px;}

.active_body_maincontainer{width:100%; }

.body_entry_container{width:100%; height:35px; display:flex; align-items:center; margin-bottom:15px;}

.body_entry_title{font-size:27px; color:rgba(0,0,0,0.8);; font-weight:600; margin-right:10px;}

.body_entry_new_container{border-radius:7px; display:flex; align-items:center; background-color:#337AB7; padding:4px 8px;}

.body_entry_new_plus{color:white; font-size:12px; margin-right:5px;}

.body_entry_new_text{font-size:16px; color:white; font-weight:500;}

.body_table_maincontiner{width:100%; font-size:12px; background-color:white;}

.body_table_options_container{display:flex;}

.body_table_option_edit_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#5BC0DE; margin-right:10px;}

.body_table_option_delete_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#D9534F;}

.body_table_option_icon{color:white; font-size:15px; margin:auto;}

.edit_modal_overlay_maincontainer{width:100%; height:100vh; background-color:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; z-index:999999999999999999999999999;}

.edit_modal_container{ width:55%; height:82%; border:1px solid rgba(0,0,0,0.2); background-color:white; border-radius:20px; display:flex; flex-direction:column;}

.edit_modal_header_container{width:100%; height:13%; display:flex; align-items:center;  position:relative; padding:0px 20px;}

.edit_modal_header_close{position:absolute; top:50%; transform:translateY(-50%); right:25px;}

.fa-times-circle{color:rgba(0,0,0,0.2); font-size:30px;}

.edit_modal_header_title{font-size:25px; color:rgba(0,0,0,0.8); font-weight:600;}

.edit_modal_header_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; border-bottom:1px solid rgba(0,0,0,0.2);}

.edit_modal_body_container{font-family:Open Sans; width:100%; height:74%; overflow:auto; padding:10px 20px 10px 20px; display:flex; flex-direction:column;}

.edit_modal_body_options_container{width:100%; height:30px; display:flex; align-items:center; margin:10px 0px;}

.edit_modal_body_options_select_title{font-size:14px; color:rgba(0,0,0,0.9); font-weight:900; margin-right:10px;}

.edit_modal_body_options_select{width:20%; height:30px; border-radius:5px; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_body_options_select_options{color:rgb(0,0,0,0.8);}

.edit_modal_options_image_upload{display:flex; align-items:center; width:auto; height:35px; border: 2px solid rgba(0,0,0,0.9); margin-left:auto; border-radius: 5px; padding: 5px 7px; background-color: rgba(0,0,0,0.1); color:rgba(0,0,0,0.9); font-weight:900; font-size:14px;}

label.edit_modal_options_image_upload input[type="file"] {position:absolute; top: -1000px;}

.fa-picture-o{color:rgba(0,0,0,0.9); font-size:20px; margin-right:5px;}

.edit_modal_input{font-family:Open Sans; margin:10px 0px; font-size:13px; width:50%; height:30px; border-radius:5px; padding:7px 7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_input_textarea{font-family:Open Sans; margin:10px 0px; width:100%; height:300px; border-radius:5px; padding:7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_footer_container{width:100%; height:13%; position:relative; display:flex; align-items:center; padding:20px;}

.edit_modal_footer_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); top:0px; border-bottom:1px solid rgba(0,0,0,0.2);}

.edit_modal_reset_add_button{margin:0px 5px; margin-left:auto; font-size:15px; padding:0px 10px; height:30px; background-color:#67C4DD; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;}

.edit_modal_footer_reset_button{margin:0px 5px; font-size:15px; padding:0px 10px; height:30px; background-color:#D9534F; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;}

.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_modal_overlay_maincontainer hide">
    <form class="edit_modal_container">
        <div class="edit_modal_header_container">
		    <a class="edit_modal_header_close" href=""><i class="fa fa-times-circle"></i></a>
		    <h2 class="edit_modal_header_title">Nuevo post</h2>
			<div class="edit_modal_header_line"></div>
		</div>
		<div class="edit_modal_body_container">
			<div class="edit_modal_body_options_container" style="">
			    <span class="edit_modal_body_options_select_title" style=" ">Categorias</span>
			    <select class="edit_modal_body_options_select" style="">
                    <option class="edit_modal_body_options_select_options" value="Noticias">Noticias</option>
                    <option class="edit_modal_body_options_select_options" value="saab">Clases</option>
                    <option class="edit_modal_body_options_select_options" value="mercedes">Evento</option>
                    <option class="edit_modal_body_options_select_options" value="audi">Blog</option>
                </select>
				<label class="edit_modal_options_image_upload pointer">
                   <input type="file" required/>
				   <i class="fa fa-picture-o"></i>
				   <span>Imagen</span>
                </label>
			</div>
			<input class="edit_modal_input" style="" type="text" placeholder="Titulo del post">
			<input class="edit_modal_input" style="" type="text" placeholder="Resumen del post">
			<input class="edit_modal_input" style="" type="text" placeholder="Descripción de la imagen">
			<textarea class="edit_modal_input_textarea" style="" type="textarea" placeholder="Contenido del post"></textarea>
		</div>
		<div class="edit_modal_footer_container" style="">
		    <div class="edit_modal_footer_line" style=""></div>
		    <a class="edit_modal_reset_add_button" href="" title="" style="">Añadir</a>
			<a class="edit_modal_footer_reset_button" href="" title="" style="">Reset</a>
		</div>
	</form>
</div>
<div class="navbar_maincontainer">
    <div class="navbar_logo_container">
	    <h1 class="navbar_logo_part1">Gab<span class="navbar_logo_part2">admin</span></h1>
	    <div class="navbar_gradient"></div>
	</div>
	<i class="navbar_menu_toggle fa fa-bars pointer"></i>
	<a class=" navbar_logout_container pointer" href="{{ route('logout') }}" title="Salir del administrador">
	    <i class="fa fa-sign-out navbar_logout_icon"></i>
	    <span class="navbar_logout_text">Salir</span>
    </a>
</div>
<div class="admin_maincontainer">
<div class="sidebar_maincontainer">
    <div class="sidebar_user_container">
	    <div class="sidebar_user_image">
		    <span class="sidebar_user_image_letter">G</span>
		</div>
		<div class="sidebar_user_info_container">
		    <span class="sidebar_user_info_name">¡Hola Gabriel!</span>
			<span class="sidebar_user_info_last_conection">Ult. conexión: 04/05/2018</span>
			<div class="sidebar_user_info_role_container">
			    <div class="sidebar_user_info_status"></div>
			    <span class="sidebar_user_info_role">Super Admin</span>
			</div>
		</div>
	</div>
	<div class="sidebar_search_container">
	    <input class="sidebar_search_input" type="text" placeholder="Buscar...">
		<a class="sidebar_search_button" href=""><i class="fa fa-search"></i></a>
	</div>
	<div class="sidebar_entries_container">
	    <div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-user sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Usuarios</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Clientes</div>      
			</div>-->
		</div>
		<div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-newspaper-o sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Posts</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
				<div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			</div>-->
		</div>
		<div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-tag sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Tags</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
				<div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			</div>-->
		</div>
	</div>
</div>
<div class="body_maincontainer">
    <div class="body_entry_container">
	    <span class="body_entry_title">Post</span>
		<a class="body_entry_new_container pointer" title="Crear nuevo">
		    <i class="fa fa-plus body_entry_new_plus"></i>
			<span class="body_entry_new_text">Nuevo</span>
		</a>
	</div>
	<table class="body_table_maincontiner">
        <tr>
            <th width="10%">Firstname</th>
            <th width="10%">Lastname</th> 
            <th width="10%">Age</th>
			<th width="1%">Acción</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer delete_button" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container" style="">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <span class="body_table_option_edit_container pointer">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</span>
				<span class="body_table_option_delete_container pointer">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</span>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container" style="">
			    <span class="body_table_option_edit_container pointer" style="">
				    <i class="fa fa-pencil body_table_option_icon" style=""></i>
				</span>
				<span class="body_table_option_delete_container pointer" style="">
				    <i class="fa fa-trash-o body_table_option_icon" style=""></i>
				</span>
			</td>
        </tr>
    </table>
</div>
</div>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Итак, я исправил это, используя абсолютное позиционирование на моем модале, например:

верх: 50%; слева: 50%; преобразование: перевод (-50%, -50%)

0 голосов
/ 25 апреля 2018

потому что fadeIn добавляет display: block css к вашему элементу.попробуйте код ниже.

$(".edit_button").click(function(){
	$('.edit_modal_overlay_maincontainer').css({opacity: 0, display: 'flex'}).animate({
                opacity: 1
            }, 300);
    });
	
	$(".edit_modal_header_close").click(function(e){
	e.preventDefault();
	$('.edit_modal_overlay_maincontainer').css('display','none');
    });
body{display:flex; flex-direction:column; position:relative; font-family:Open Sans;}

*{box-sizing:border-box; margin:0; padding:0;} 

a{text-decoration:none;}

table, th, td {border: 1px solid rgba(0,0,0,0.2); border-collapse: collapse;}

th, td {padding: 4px 8px;}

th { text-align: left;}

.pointer{cursor:pointer;}

.navbar_maincontainer{width:100%; height:8vh; background-color:#605CA8; display:flex; align-items:center;}

.navbar_logo_container{width:280px; height:100%;  position:relative; display:flex; align-items:center; padding:0px 15px; border-right:1px solid rgba(0,0,0,0.);}

.navbar_gradient{width:100%; height:100%; position:absolute; right:0px; top:0px; background: linear-gradient(to left, rgba(52, 50, 89, 0.7), rgba(52, 50, 89, 0));}

.navbar_logo_part1{z-index:9999999999; font-family:Rubik; font-size:24px; color:#00ffa1;}

.navbar_logo_part2{font-size:23px; color:rgba(255,255,255,0.85);}

.navbar_menu_toggle{font-size:26px; color:rgba(255,255,255,1.0); margin-left:15px;}

.navbar_menu_toggle:hover{color:#2A3F54;}

.navbar_logout_container{width:auto; height:35px; display:flex; align-items:center; margin-left:auto; margin-right:30px; font-family:Open Sans;}

.navbar_logout_icon{font-size:26px; color:rgba(255,255,255,1.0); margin-left:auto; margin-right:5px;}

.navbar_logout_text{font-size:17px; color:rgba(255,255,255,1.0);}

.navbar_logout_container:hover .navbar_logout_icon{color:#2A3F54;}

.navbar_logout_container:hover .navbar_logout_text{color:#2A3F54;}

.admin_maincontainer{width:100%; height:92vh; display:flex;}

.sidebar_maincontainer{overflow-x:hidden; width:280px; height:100%; transition:all 100ms ease; display:flex; flex-direction:column; background-color:#2A3F54; box-shadow:4px 4px 4px rgba(0,0,0,0.3); align-items:center;}

.active_sidebar_maincontainer{width:0px;}

.sidebar_user_container{width:100%; height:90px; display:flex; padding:10px; margin:5px 0px;}

.sidebar_user_image{width:60px; height:60px; border-radius:50%; background-color:#01B271; display:flex;}

.sidebar_user_image_letter{margin:auto; font-size:25px; color:rgba(255,255,255,0.9); font-weight:600;}

.sidebar_user_info_container{width:auto; height:100%; display:flex; flex-direction:column; padding:5px 5px 5px 10px;}

.sidebar_user_info_name{font-size:19px; color:rgba(255,255,255,1.0); font-weight:500;}

.sidebar_user_info_role_container{width:100%; display:flex; height:25px; align-items:center;}

.sidebar_user_info_status{width:7px; height:7px; border-radius:50%; background-color:#3C763D; margin-right:5px;}

.sidebar_user_info_role{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300;}

.sidebar_user_info_last_conection{font-size:10px; color:rgba(255,255,255,0.8); font-weight:300; margin-top:7px;}

.sidebar_search_container{width:90%; height:45px; display:flex; align-items:center; border-radius:11px; background-color:#3A4851; margin-top:20px; margin-bottom:15px; overflow:hidden;}

.sidebar_search_input{width:85%; height:100%; padding:10px; background-color:#3A4851; border:1px solid #3A4851; color:rgba(255,255,255,0.9); font-size:17px;}

.sidebar_search_input:focus {border-color: none;-webkit-box-shadow: none; box-shadow: none; outline: none;}

.sidebar_search_button{width:15%; height:100%; background-color:#3A4851; display:flex;}

.fa-search{font-size:20px; color:rgba(255,255,255,0.9); margin:auto;}

.sidebar_entries_container{width:100%; height:auto; overflow-x:hidden; overflow-y:auto; border-top:1px solid rgba(42,63,84,0.5);}

.sidebar_entry_container{width:100%; height:auto; display:flex; flex-direction:column; border-bottom:1px solid rgba(255,255,255,0.1);}

.sidebar_entry_container:hover{cursor:pointer;}

.sidebar_entry_link_container{width:100%; height:50px; display:flex; align-items:center; padding:10px; position:relative;}

.sidebar_entry_link_container:hover{}

.sidebar_entry_link_icon_container{width:30px; height:100%; display:flex; justify-content:center; align-items:center; margin-right:5px;}

.active_entry{background-color:#1c2a38;}

.sidebar_entry_link_icon{font-size:19px; color:rgba(255,255,255,0.9);}

.sidebar_entry_link_item{font-size:18px; color:rgba(255,255,255,0.9); font-weight:500;}

.sidebar_entry_dropdown_container{width:100%; height:auto; display:flex; flex-direction:column; display:none;}

.sidebar_entry_dropdown_item{width:100%; height:35px; display:flex; transition:all 400ms ease; align-items:center; padding:0px 20px; font-size:14px; color:rgba(255,255,2555,0.9);}

.sidebar_entry_dropdown_item:hover{background-color:#3A4851}

.fa-chevron-right{color:rgba(255,255,255,0.9); font-size:8px; margin-right:10px; transition:all 400ms ease;}

.fa-chevron-down{font-size:14px; color:rgba(255,255,255,0.9); position:absolute; top:50%; transform:translateY(-50%); right:11px;}

.body_maincontainer{width:80%; height:100%; background-color:rgba(0,0,0,0.1); padding:50px;}

.active_body_maincontainer{width:100%; }

.body_entry_container{width:100%; height:35px; display:flex; align-items:center; margin-bottom:15px;}

.body_entry_title{font-size:27px; color:rgba(0,0,0,0.8);; font-weight:600; margin-right:10px;}

.body_entry_new_container{border-radius:7px; display:flex; align-items:center; background-color:#337AB7; padding:4px 8px;}

.body_entry_new_plus{color:white; font-size:12px; margin-right:5px;}

.body_entry_new_text{font-size:16px; color:white; font-weight:500;}

.body_table_maincontiner{width:100%; font-size:12px; background-color:white;}

.body_table_options_container{display:flex;}

.body_table_option_edit_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#5BC0DE; margin-right:10px;}

.body_table_option_delete_container{width:25px; height:25px; border-radius:5px; display:flex; background-color:#D9534F;}

.body_table_option_icon{color:white; font-size:15px; margin:auto;}

.edit_modal_overlay_maincontainer{width:100%; height:100vh; background-color:rgba(0,0,0,0.7); position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; z-index:999999999999999999999999999; transition: all 0.5s ease-in-out}

.edit_modal_container{ width:55%; height:82%; border:1px solid rgba(0,0,0,0.2); background-color:white; border-radius:20px; display:flex; flex-direction:column;}

.edit_modal_header_container{width:100%; height:13%; display:flex; align-items:center;  position:relative; padding:0px 20px;}

.edit_modal_header_close{position:absolute; top:50%; transform:translateY(-50%); right:25px;}

.fa-times-circle{color:rgba(0,0,0,0.2); font-size:30px;}

.edit_modal_header_title{font-size:25px; color:rgba(0,0,0,0.8); font-weight:600;}

.edit_modal_header_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); bottom:0px; border-bottom:1px solid rgba(0,0,0,0.2);}

.edit_modal_body_container{font-family:Open Sans; width:100%; height:74%; overflow:auto; padding:10px 20px 10px 20px; display:flex; flex-direction:column;}

.edit_modal_body_options_container{width:100%; height:30px; display:flex; align-items:center; margin:10px 0px;}

.edit_modal_body_options_select_title{font-size:14px; color:rgba(0,0,0,0.9); font-weight:900; margin-right:10px;}

.edit_modal_body_options_select{width:20%; height:30px; border-radius:5px; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_body_options_select_options{color:rgb(0,0,0,0.8);}

.edit_modal_options_image_upload{display:flex; align-items:center; width:auto; height:35px; border: 2px solid rgba(0,0,0,0.9); margin-left:auto; border-radius: 5px; padding: 5px 7px; background-color: rgba(0,0,0,0.1); color:rgba(0,0,0,0.9); font-weight:900; font-size:14px;}

label.edit_modal_options_image_upload input[type="file"] {position:absolute; top: -1000px;}

.fa-picture-o{color:rgba(0,0,0,0.9); font-size:20px; margin-right:5px;}

.edit_modal_input{font-family:Open Sans; margin:10px 0px; font-size:13px; width:50%; height:30px; border-radius:5px; padding:7px 7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_input_textarea{font-family:Open Sans; margin:10px 0px; width:100%; height:300px; border-radius:5px; padding:7px; box-shadow:none; border:1px solid rgba(0,0,0,0.2);}

.edit_modal_footer_container{width:100%; height:13%; position:relative; display:flex; align-items:center; padding:20px;}

.edit_modal_footer_line{width:94%; height:1px; position:absolute; left:50%; transform:translateX(-50%); top:0px; border-bottom:1px solid rgba(0,0,0,0.2);}

.edit_modal_reset_add_button{margin:0px 5px; margin-left:auto; font-size:15px; padding:0px 10px; height:30px; background-color:#67C4DD; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;}

.edit_modal_footer_reset_button{margin:0px 5px; font-size:15px; padding:0px 10px; height:30px; background-color:#D9534F; border-radius:5px; color:white; display:flex; justify-content:center; align-items:center;}

.hide{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_modal_overlay_maincontainer hide">
    <form class="edit_modal_container">
        <div class="edit_modal_header_container">
		    <a class="edit_modal_header_close" href=""><i class="fa fa-times-circle"></i></a>
		    <h2 class="edit_modal_header_title">Nuevo post</h2>
			<div class="edit_modal_header_line"></div>
		</div>
		<div class="edit_modal_body_container">
			<div class="edit_modal_body_options_container" style="">
			    <span class="edit_modal_body_options_select_title" style=" ">Categorias</span>
			    <select class="edit_modal_body_options_select" style="">
                    <option class="edit_modal_body_options_select_options" value="Noticias">Noticias</option>
                    <option class="edit_modal_body_options_select_options" value="saab">Clases</option>
                    <option class="edit_modal_body_options_select_options" value="mercedes">Evento</option>
                    <option class="edit_modal_body_options_select_options" value="audi">Blog</option>
                </select>
				<label class="edit_modal_options_image_upload pointer">
                   <input type="file" required/>
				   <i class="fa fa-picture-o"></i>
				   <span>Imagen</span>
                </label>
			</div>
			<input class="edit_modal_input" style="" type="text" placeholder="Titulo del post">
			<input class="edit_modal_input" style="" type="text" placeholder="Resumen del post">
			<input class="edit_modal_input" style="" type="text" placeholder="Descripción de la imagen">
			<textarea class="edit_modal_input_textarea" style="" type="textarea" placeholder="Contenido del post"></textarea>
		</div>
		<div class="edit_modal_footer_container" style="">
		    <div class="edit_modal_footer_line" style=""></div>
		    <a class="edit_modal_reset_add_button" href="" title="" style="">Añadir</a>
			<a class="edit_modal_footer_reset_button" href="" title="" style="">Reset</a>
		</div>
	</form>
</div>
<div class="navbar_maincontainer">
    <div class="navbar_logo_container">
	    <h1 class="navbar_logo_part1">Gab<span class="navbar_logo_part2">admin</span></h1>
	    <div class="navbar_gradient"></div>
	</div>
	<i class="navbar_menu_toggle fa fa-bars pointer"></i>
	<a class=" navbar_logout_container pointer" href="{{ route('logout') }}" title="Salir del administrador">
	    <i class="fa fa-sign-out navbar_logout_icon"></i>
	    <span class="navbar_logout_text">Salir</span>
    </a>
</div>
<div class="admin_maincontainer">
<div class="sidebar_maincontainer">
    <div class="sidebar_user_container">
	    <div class="sidebar_user_image">
		    <span class="sidebar_user_image_letter">G</span>
		</div>
		<div class="sidebar_user_info_container">
		    <span class="sidebar_user_info_name">¡Hola Gabriel!</span>
			<span class="sidebar_user_info_last_conection">Ult. conexión: 04/05/2018</span>
			<div class="sidebar_user_info_role_container">
			    <div class="sidebar_user_info_status"></div>
			    <span class="sidebar_user_info_role">Super Admin</span>
			</div>
		</div>
	</div>
	<div class="sidebar_search_container">
	    <input class="sidebar_search_input" type="text" placeholder="Buscar...">
		<a class="sidebar_search_button" href=""><i class="fa fa-search"></i></a>
	</div>
	<div class="sidebar_entries_container">
	    <div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-user sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Usuarios</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Clientes</div>      
			</div>-->
		</div>
		<div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-newspaper-o sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Posts</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
				<div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			</div>-->
		</div>
		<div class="sidebar_entry_container">
		    <div class="sidebar_entry_link_container">
				<div class="sidebar_entry_link_icon_container">
				    <i class="fa fa-tag sidebar_entry_link_icon"></i>
				</div>
				<span class="sidebar_entry_link_item">Tags</span>
			</div>
			<!--<div class="sidebar_entry_dropdown_container">
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			    <div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
				<div class="sidebar_entry_dropdown_item"><i class="fa fa-chevron-right"></i> Admin</div>    
			</div>-->
		</div>
	</div>
</div>
<div class="body_maincontainer">
    <div class="body_entry_container">
	    <span class="body_entry_title">Post</span>
		<a class="body_entry_new_container pointer" title="Crear nuevo">
		    <i class="fa fa-plus body_entry_new_plus"></i>
			<span class="body_entry_new_text">Nuevo</span>
		</a>
	</div>
	<table class="body_table_maincontiner">
        <tr>
            <th width="10%">Firstname</th>
            <th width="10%">Lastname</th> 
            <th width="10%">Age</th>
			<th width="1%">Acción</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer delete_button" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container" style="">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <a class="body_table_option_edit_container pointer edit_button" title="Editar">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</a>
				<a class="body_table_option_delete_container pointer" title="Borrar">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</a>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container">
			    <span class="body_table_option_edit_container pointer">
				    <i class="fa fa-pencil body_table_option_icon"></i>
				</span>
				<span class="body_table_option_delete_container pointer">
				    <i class="fa fa-trash-o body_table_option_icon"></i>
				</span>
			</td>
        </tr>
		<tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
			<td class="body_table_options_container" style="">
			    <span class="body_table_option_edit_container pointer" style="">
				    <i class="fa fa-pencil body_table_option_icon" style=""></i>
				</span>
				<span class="body_table_option_delete_container pointer" style="">
				    <i class="fa fa-trash-o body_table_option_icon" style=""></i>
				</span>
			</td>
        </tr>
    </table>
</div>
</div>
...