个人中心
gpt4 book ai didi

jquery - 淡入后隐藏模态不居中

转载 作者：行者123 更新时间：2023-11-28 01:49:47 25 4
gpt4 key购买 nike

我正在自己做一个管理面板，但我遇到了一个问题，所以我有这个模态，它一开始是隐藏的，但在我点击 y 行上的编辑按钮后显示，但由于某种原因，一旦模态显示它没有居中，它应该居中，因为模态的容器正在使用 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>

最佳答案

因为 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>

关于jquery - 淡入后隐藏模态不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50011297/

25 4 0
文章推荐： html - hover 和 focus 伪类 Action
文章推荐： c++ - 将 cuBLAS 与来自 Thrust 的复数结合使用
文章推荐： c++ - 每当传递左值时存储一个 const 引用，并在传递右值时存储一个拷贝
文章推荐： CSS 动画 : Fading images into one another and animating the image and moving it's direction
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com