0

El problema que tengo es que quiero que mi web al darle al botón de búsqueda o a la lupa que me salga un input para poder buscarlo que quiero. Hasta ahí bien y creo que mas o menos lo tengo pero lo que quiero es que cuando le de click y me salga el input que toda la pagina se oscurezca menos el input... Como si fuera un modal o algo asi.

Esto es lo que tengo hasta ahora. Y bueno stackoverflow no me deja enviar la pregunta porque dice que tengo mucho código... :) No se porque me pone eso jejee

$(document).ready(function() {
$("#botonBusqueda").click(function() {
    $("#modal").toggle();
    $("#modal > input").css("width", "115%");


});

});
.fondo {
    background-image: url('../img/2545370.jpg');
    height: 172vh;
    background-position: center;
    background-size: cover;
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
}

body {
    max-width: 100%;
}


/* NavBar*/

.navbar-nav {
    position: relative;
}

.navbar-brand {
    margin-left: 11%;
}

.nav-item {
    margin-left: 25%;
}

form {
    margin-left: 50px;
}

#modal {
    display: none;
    position: absolute;
    left: 25%;
    right: 40%;
    width: 160%;
    z-index: 9999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="es">

<head>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="https://kit.fontawesome.com/b909a3cc21.js" crossorigin="anonymous"></script>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <script src="miJs/miJavascript.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style/estilos.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">

    <title>EasyLinks</title>
</head>

<body>
    <!--NavBar -->
    <header class="header">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">
                <img src="../pro/img/Icono.png" width="30" height="30" class="d-inline-block align-top" alt="">
            </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Dropdown
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="btn btn-default" id="botonBusqueda">
                            <i class="fas fa-search"></i>
                        </button>
                    </li>
                    <div id="modal" class="input-group mb-4">
                        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    </div>
                </ul>
                <!--<form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                </form>-->
            </div>
        </nav>
    </header>
    <!--NavBar -->

    <!-- Slide -->
    <section class="foo-class">
        <div class="container-fluid fondo">
            <div class="container d-flex flex-column justify-content-center h-100 align-items-center">
                <h1>All is connected!</h1>
                <h6>Llega a cualquier sitio del mundo con unos sencillos clicks!</h6>
                <div>
                    <a href="#" class="btn btn-dark">Navega</a>
                </div>
            </div>
        </div>
    </section>


</body>

</html>

4
  • acabo de cambiar un poco el jquery con el toggle con algo mas practica para mostrar el input... Commented el 26 dic. 2019 a las 11:52
  • Bootstrap tiene una clase "modal-backdrop" que es la que se usa para oscurecer el fondo cuando se muestra una ventana modal. Si creas un div a primer nivel del body, y le pones/quitas esa clase consigues que aparezca/desaparezca el sombreado. Aquí tienes una forma de conseguirlo: stackoverflow.com/questions/16487052/…
    – ordago
    Commented el 26 dic. 2019 a las 12:07
  • voy a mirarlo , pero eso me sirve para mi boton de busqueda? Commented el 26 dic. 2019 a las 12:12
  • Podrias probar metiendo el boton dentro de un modal y de esta manera vas apoder realizar lo que deseas Commented el 26 dic. 2019 a las 12:33

1 respuesta 1

1

lo que puedes hacer es: Colocar dicho input en un modal respectivamente ya que e visto que usas boostrap. o lo otro es un poco mas complejo pero te permite hacerlo como tu quieras.

Define una Clase o atributo id en la etiqueta Luego en la Funcion Jquery al mostrar el Input con el toggle pon antes de eso el fundo oscuro y opacidad 100% Luego muestra el input en la parte de la pantalla que desees.

esto mismo lo podrías lograr también con un evento "focus".

Saludos.

10
  • 3
    Hola y bienvenido a la comunidad. Es maravilloso que quieras aportar pero evitamos dar respuestas de baja calidad ya que pueden terminar cerradas. Por favor edita tu respuesta y agrega el código que propones. Te invito a hacer el recorrido y la sección Como responder para que entiendas de lo que hablo.
    – DjCrazy
    Commented el 26 dic. 2019 a las 12:21
  • Entiendo lo del modal. Pero la otra forma que me has dicho no la acabo de pillar podrias poner un pequeño ejemplo? Commented el 26 dic. 2019 a las 13:07
  • Ejemplo, en la función de Js solo tienes que ponerte a jugar con css es decir: por ejemplo, puedes empezar a modificar el css para que al hacer click en el input se cambien los stilos y se oscurezca el fondo y el input se muestre en otra pusicion de la pantalla. disculpa pero estoy desde el movil no puedo agregar codigo
    – JJMADEO
    Commented el 26 dic. 2019 a las 13:15
  • bueno, la verdad esque no me voy a complicar la vida . Lo estoy haciendo con un modal y ya. Lo que estoy intentando ahora es cuadrarlo en el sitio que yo quiero.Puedo poner el modal donde yo quiera no? es que es mi primera vez con bootstrap y con Jquery y creo que se nota jaja. Muchas gracias @JJMADEO Commented el 26 dic. 2019 a las 13:28
  • si, pero ciertamente podrías dejarlo en el medio, queda bien en el medio. aparte el ya se encarga de todo y queda lindo. o también podrías dejarlo en el medio y poner en el modal el input de búsqueda y abajo el resultado en tiempo real.
    – JJMADEO
    Commented el 26 dic. 2019 a las 13:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.