Dev Faq
0
votes

Comment filtrer correctement la carte Bootstrap HTMLDivelement?

Je crée une fonction de filtrage. Avec cette fonction, nous voulons filtrer les cartes d'application, mais je ne peux pas afficher l'élément correctement. La fonction ne montre pas une partie de la carte filtrée, du bouton, de l'image ou du texte. Je sais que en plaçant "#mydiv *" dans la fonction .Filter, il recherchera tous les éléments, même en sachant cela, je n'ai pas trouvé la bonne façon de le faire. Quelqu'un peut-il m'aider?

J'ai essayé avec le code ci-dessous: p>

p> 

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
    </div>
</div>



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

0 commentaires

3 Réponses :

1
votes

Vous pouvez d'abord masquer toutes les cartes lors de la frappe et ne montrent que celles basées sur la requête de recherche. Pour simplifier votre filtre un peu, vous pouvez utiliser aussi.

p> 

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
  <title>SGR - Desktop</title>
  <!-- Custom CSS -->
  <!-- Custom CSS -->
  <link href="/assets/css/font-awesome.css" rel="stylesheet" />
  <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
  <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
  <link href="/dist/css/style.min.css" rel="stylesheet">
  <link href="/dist/css/core.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- ============================================================== -->
  <!-- Preloader - style you can find in spinners.css -->
  <!-- ============================================================== -->
  <div class="preloader">
    <div class="lds-ripple">
      <div class="lds-pos"></div>
      <div class="lds-pos"></div>
    </div>
  </div>
  <div id="main-wrapper">
    <div class="page-wrapper">
      <div class="page-breadcrumb">
        <div class="row">
          <div class="col-12 d-flex no-block align-items-center">



            <div class="header-title">
              <h1>
                Home
                <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
              </h1>
            </div>

          </div>
        </div>
      </div>
      <div class="container-fluid">


        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <style>

        </style>
        <input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
        <br />
        <br />
        <div class="container">
          <div id="myDIV" class="row">

            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="emulador project64">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">emulador project64</h5>
                  <p class="card-text">project64.exe</p>
                  <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="overwatch">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">overwatch</h5>
                  <p class="card-text">overwatch.exe</p>
                  <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="YouTube">
                <img class="card-img-top" src="../../assets/images/YouTube.png">
                <div class="card-body">
                  <h5 class="card-title">YouTube</h5>
                  <p class="card-text">Google Inc.</p>
                  <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Canal de Denuncias">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Canal de Denuncias</h5>
                  <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                  <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Cipher">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Cipher</h5>
                  <p class="card-text">www.cipher.cl</p>
                  <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Terraria">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Terraria</h5>
                  <p class="card-text">shared/terraria.exe</p>
                  <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Revista And&#233;n">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Revista And&#233;n</h5>
                  <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                  <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Smov2">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Smov2</h5>
                  <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                  <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Concursos internos">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Concursos internos</h5>
                  <p class="card-text">https://metro.openagora.cl/</p>
                  <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="The Clinic">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">The Clinic</h5>
                  <p class="card-text">www.theclinic.cl</p>
                  <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Hotmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Hotmail</h5>
                  <p class="card-text">http://www.hotmail.com</p>
                  <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Gmail">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Gmail</h5>
                  <p class="card-text">http://www.gmail.com</p>
                  <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="CNN">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">CNN</h5>
                  <p class="card-text">www.cnn.org</p>
                  <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Metro Familia">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Metro Familia</h5>
                  <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                  <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="League of Legends">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">League of Legends</h5>
                  <p class="card-text">lollauncher.exe</p>
                  <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Minecraft Java Edition">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Minecraft Java Edition</h5>
                  <p class="card-text">minecraft.exe</p>
                  <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Webmail Metro">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Webmail Metro</h5>
                  <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                  <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Autoconsulta ESS">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Autoconsulta ESS</h5>
                  <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                  <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="And&#233;n Social">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">And&#233;n Social</h5>
                  <p class="card-text">http://andensocial.metro.cl</p>
                  <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
              <div class="card" id="Sitio Conductores">
                <img class="card-img-top" src="">
                <div class="card-body">
                  <h5 class="card-title">Sitio Conductores</h5>
                  <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                  <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                </div>
              </div>


            </div>
          </div>
        </div>



      </div>
      <footer class="footer text-center">
        <div class="modal" id="loginModal">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div id="login"></div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
  <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap tether Core JavaScript -->
  <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
  <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
  <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
  <!--Wave Effects -->
  <script src="/dist/js/waves.js"></script>
  <!--Menu sidebar -->
  <script src="/dist/js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="/dist/js/custom.min.js"></script>
  <script src="/dist/js/core.js"></script>
  <script src="/assets/libs/toastr/build/toastr.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
  <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
  <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
  <script src="/assets/libs/bootbox/bootbox.js"></script>

  <!--This page JavaScript -->
  <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
  <!-- Charts js Files -->

  <!--Success Modal Templates-->
  <div class="modal fade modal-message modal-success" id="modal-success">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="far fa-check-circle"></i>
        </div>
        <div class="modal-title"> Correcto
        </div>
        <div class="modal-body"> La solicitud se efectuó con éxito
        </div>
        <div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
      </div>
    </div>
  </div>
  <!--End Success Modal Templates-->
  <!--Info Modal Templates-->
  <div class="modal fade modal-message modal-info" id="modal-info">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-envelope"></i>
        </div>
        <div class="modal-title"> Información
        </div>
        <div class="modal-body"> Se le notifica información importante
        </div>
        <div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Info Modal Templates-->
  <!--Danger Modal Templates-->
  <div class="modal fade modal-message modal-danger" id="modal-danger">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
        </div>
        <div class="modal-title"> Error
        </div>
        <div class="modal-body"> Se ha producido un error
        </div>
        <div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Danger Modal Templates-->
  <!--Warning Modal Templates-->
  <div class="modal fade modal-message modal-warning" id="modal-warning">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header"> <i class="fa fa-warning"></i>
        </div>
        <div class="modal-title"> Alerta
        </div>
        <div class="modal-body"> Algo ha salido mal
        </div>
        <div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
      </div>
    </div>
  </div>
  <!--End Warning Modal Templates-->
  <!--Confirm Modal Templates-->
  <div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
      <div class="col-md-12">
        <div class="modal-header">
          <i class="fa fa-warning"></i>
        </div>
        <div class="modal-body">
          Mensaje
        </div>
        <div class="modal-body">
          Mensaje que iría en el centro
        </div>
      </div>
    </div>
  </div>
  <!--Confirm Modal Templates-->


</body>

</html>

4 commentaires

Tout d'abord, merci pour votre réponse Carl. Oui, je l'ai essayé, mais il y a des problèmes: - Par exemple, si vous essayez de rechercher "Abrir", aucun élément n'est filtré car tous les éléments ont le mot "Abrir". - Les éléments filtrés ne sont pas affichés correctement. J'ai besoin de filtrer uniquement par le "titre de la carte". :(

J'ai mis à jour ma réponse. Jetez un coup d'œil et laissez-moi savoir si cela fonctionne.

Merci Carl mais la fonction ne commande pas les éléments correctement, car je cache la carte et non la colonne parent. J'ai inclus "cela.parentnode" et maintenant cela fonctionne correctement. Merci

J'ai mis à jour mon code pour refléter votre dernier commentaire. Veuillez marquer cette réponse comme correct si tous vos problèmes ont été résolus. Merci!

0
votes 
$('#box').keyup(function(){
   var valThis = $(this).val().toLowerCase();
    if(valThis === ""){
        $('.library_card > div').show();
    } else {
        $('.library_card > div').each(function(){
            var text = $(this).text().toLowerCase();
            (text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
        });
   };
});



// #box-- inpuut type text id
// .library_card -- div class
1 commentaires

Tout d'abord, merci pour votre réponse Soumyanjan. Il y a quelques problèmes: - Par exemple, si vous essayez de rechercher "Abrir", aucun élément n'est filtré car tous les éléments ont le mot "Abrir".

0
votes

J'ai trouvé de cette façon de résoudre le problème et d'empêcher les cartes d'être affichées de manière incorrecte:

p> 

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
    <title>SGR - Desktop</title>
    <!-- Custom CSS -->
    <!-- Custom CSS -->
    <link href="/assets/css/font-awesome.css" rel="stylesheet" />
    <link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
    <link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
    <link href="/dist/css/style.min.css" rel="stylesheet">
    <link href="/dist/css/core.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="lds-ripple">
            <div class="lds-pos"></div>
            <div class="lds-pos"></div>
        </div>
    </div>
    <div id="main-wrapper">
        <div class="page-wrapper">
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-12 d-flex no-block align-items-center">
                        


    <div class="header-title">
        <h1>
            Home
                    <small>
                        <i class="fa fa-angle-right"></i>
                        Desktop
                    </small>
        </h1>
    </div>

                    </div>
                </div>
            </div>
            <div class="container-fluid">
                

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
    <div  id="myDIV"  class="row">

                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="emulador project64">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">emulador project64</h5>
                                <p class="card-text">project64.exe</p>
                                <a href="project64.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="overwatch">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">overwatch</h5>
                                <p class="card-text">overwatch.exe</p>
                                <a href="overwatch.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="YouTube">
                            <img class="card-img-top" src="../../assets/images/YouTube.png">
                            <div class="card-body">
                                <h5 class="card-title">YouTube</h5>
                                <p class="card-text">Google Inc.</p>
                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Canal de Denuncias">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Canal de Denuncias</h5>
                                <p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
                                <a href="https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Cipher">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Cipher</h5>
                                <p class="card-text">www.cipher.cl</p>
                                <a href="www.cipher.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Terraria">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Terraria</h5>
                                <p class="card-text">shared/terraria.exe</p>
                                <a href="shared/terraria.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Revista And&#233;n">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Revista And&#233;n</h5>
                                <p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
                                <a href="http://nt25_intranet/archivos/revistas/2017-03/revista.pdf" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Smov2">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Smov2</h5>
                                <p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
                                <a href="\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Concursos internos">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Concursos internos</h5>
                                <p class="card-text">https://metro.openagora.cl/</p>
                                <a href="https://metro.openagora.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="The Clinic">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">The Clinic</h5>
                                <p class="card-text">www.theclinic.cl</p>
                                <a href="www.theclinic.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Hotmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Hotmail</h5>
                                <p class="card-text">http://www.hotmail.com</p>
                                <a href="http://www.hotmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Gmail">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Gmail</h5>
                                <p class="card-text">http://www.gmail.com</p>
                                <a href="http://www.gmail.com" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="CNN">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">CNN</h5>
                                <p class="card-text">www.cnn.org</p>
                                <a href="www.cnn.org" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Metro Familia">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Metro Familia</h5>
                                <p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
                                <a href="http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="League of Legends">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">League of Legends</h5>
                                <p class="card-text">lollauncher.exe</p>
                                <a href="lollauncher.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Minecraft Java Edition">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Minecraft Java Edition</h5>
                                <p class="card-text">minecraft.exe</p>
                                <a href="minecraft.exe" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Webmail Metro">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Webmail Metro</h5>
                                <p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
                                <a href="https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&amp;url=https%3a%2f%2fmail.metro.cl%2fowa%2f" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Autoconsulta ESS">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Autoconsulta ESS</h5>
                                <p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
                                <a href="http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="And&#233;n Social">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">And&#233;n Social</h5>
                                <p class="card-text">http://andensocial.metro.cl</p>
                                <a href="http://andensocial.metro.cl" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                        <div class="card" id="Sitio Conductores">
                            <img class="card-img-top" src="">
                            <div class="card-body">
                                <h5 class="card-title">Sitio Conductores</h5>
                                <p class="card-text">http://operaciones.metrosantiago.cl/</p>
                                <a href="http://operaciones.metrosantiago.cl/" target="_blank" class="btn btn-secondary">Abrir</a>
                            </div>
                        </div>


                </div>
    </div>
</div>



            </div>
            <footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content">                    <div id="login"></div>
</div></div></div>                
            </footer>
        </div>
    </div>
    <script src="/assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
    <script src="/assets/extra-libs/sparkline/sparkline.js"></script>
    <!--Wave Effects -->
    <script src="/dist/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="/dist/js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="/dist/js/custom.min.js"></script>
    <script src="/dist/js/core.js"></script>
    <script src="/assets/libs/toastr/build/toastr.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="/assets/libs/bootbox/bootbox.js"></script>

    <!--This page JavaScript -->
    <!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
    <!-- Charts js Files -->

    <!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="far fa-check-circle"></i>
</div><div class="modal-title">        Correcto
</div><div class="modal-body">        La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-envelope"></i>
</div><div class="modal-title">        Información
</div><div class="modal-body">        Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title">        Error
</div><div class="modal-body">        Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">        <i class="fa fa-warning"></i>
</div><div class="modal-title">        Alerta
</div><div class="modal-body">        Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
    <div class="row">
        <div class="col-md-12">
            <div class="modal-header">
                <i class="fa fa-warning"></i>
            </div>
            <div class="modal-body">
                Mensaje
            </div>
            <div class="modal-body">
                Mensaje que iría en el centro
            </div>
        </div>
    </div>
</div>
<!--Confirm Modal Templates-->


</body>

</html>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO