Formulario en HTML y LigthBox

T4ke0veR · #1 (**permalink**) 21/05/2015, 10:19

Saludos...

tengo un formulario de Linea Blanca y el mismo posee un link de busqueda avanzada y me manda a otra web para mostrar resultados....

Me gustaria abrirlo en LigthBox... Alguien puede ayudarme con esot??? donde debo colocar las variables para la accion...

Codigo

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="js/bsn.AutoSuggest_c_2.0.js" type="text/javascript"></script>
  <link href="css/autosuggest_inquisitor.css" rel="stylesheet" type="text/css" charset="utf-8" />
  <link href="base.css" rel="stylesheet" type="text/css" charset="utf-8" />
  <script language="javascript" type="text/javascript">
    //Direccion del microsite donde enviaremos los datos
    var urlMicroSite = "http://goviajes.aramix.es/acceso.aspx";
  </script>
  <script src="js/util.js" type="text/javascript"></script>
</head>
<body onload="cargarElementos();" id="body">
  <form action="" class="CriteriosAereo">
  <div class="btngrisbl24" id="divbuscador" style="border: solid 1px; width: 450px; height: 300px;">
    <div id="divcabecera" style="font-family: Verdana; margin: 5px 5px 5px 10px; font-size: 14px;" >
      BUSCAR VUELOS
    </div>
    <div id="divbusqueda" style="padding-left: 2px; padding-bottom: 3px; font-family: Verdana; font-size: 11px;
      border: 1px solid; margin: 10px 10px 10px 10px;">
      buscar:
      <input type="radio" name="rbtnIdaVuelta" checked="checked" id="rbtnIdaVuelta" onclick="cargarElementos(lstMesIda.value,lstDiaIda.selectedIndex,lstMesIda.selectedIndex);cambiodeMes(lstDiaIda.length,lstDiaIda.value,lstMesIda.selectedIndex);muestraDivVuelta();" /> 
      <label style="padding-right:15px;">ida y vuelta</label>
      <input type="radio" name="rbtnIdaVuelta" id="rbtnIda" onclick="cargarElementos(lstMesIda.value,lstDiaIda.selectedIndex,lstMesIda.selectedIndex);ocultarDivVuelta();" />
      <label style="padding-right:15px;">sólo ida </label>
        <input type="radio" name="rbtnIdaVuelta" id="rbtnMultiple" onclick="queryStringBusqueda('multidestino');" />
        <a href="#" onclick="queryStringBusqueda('multidestino');return false;">
       múltiples destinos</a>
    </div>
    <div id="divlbldestinos" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label style="margin-right: 110px;">
        aeropuerto salida:</label>
      <label id="lbldestino">
       aeropuerto destino:</label>
    </div>
    <div id="divdestinos" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <input type="text" class="btngrisbl24Buscar" id="txtIATAIda" style="width: 200px;" onchange="vaciarHdnIATAIda();" onclick="this.select();" />
      <input id="txtIATARegreso" onclick="this.select();" onchange="vaciarHdnIATARegreso();" type="text" style="width: 200px; margin-left:5px;"/>
    </div>
    <div id="divlblfechasalida" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label>
        fecha salida:</label>
    </div>
    <div id="divfsalida" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <select name="lstDiaIda" id="lstDiaIda" size="1" onchange="igualarFecha(this.selectedIndex,lstMesIda.value,lstMesIda.selectedIndex,lstMesRegreso.selectedIndex,lstDiaRegreso.selectedIndex);"
        style="width: 40px;">
      </select>
      <select name="lstMesIda" id="lstMesIda" size="1" onchange="cargarDiasIda(this.value,lstDiaIda.selectedIndex,this.selectedIndex);igualarFecha(lstDiaIda.selectedIndex,this.value,this.selectedIndex,lstMesRegreso.selectedIndex,lstDiaRegreso.selectedIndex);"
        style="width: 130px;">
      </select>
    </div>
    <div id="divlblfecharegreso" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label>
        fecha regreso:</label>
    </div>
    <div id="divfregreso" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <select name="lstDiaRegreso" id="lstDiaRegreso" size="1" style="width: 40px;" onblur="regresoDespuesIda();">
      </select>
      <select name="lstMesRegreso" id="lstMesRegreso" size="1" onchange="cargarDiasVuelta(this.value,lstDiaRegreso.selectedIndex);" onblur="regresoDespuesIda();"
        style="width: 130px;">
      </select>
    </div>
    <div id="divpasajeros" style="margin: 0px 20px 0px 10px; font-family: Verdana; font-size: 11px;">
      adultos:
      <select name="lstAdultos" id="cmbAdultos" size="1">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      niños:
      <select name="lstNinos" id="cmbChilds" size="1">
        <option value="0" selected="selected">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      bebés:
      <select name="lstBebes" id="cmbInfants" size="1">
        <option value="0" selected="selected">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </div>
    <div id="divedades" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <label style="margin-right: 50px;">
        (+12)</label>
      <label style="margin-right: 35px;">
        (0-11)</label>
      <label>
        (0-23 meses)</label>
    </div>
    <div id="divBAvanzada" style="margin: 0px 10px 0px 10px; font-family: Verdana; font-size: 11px;">
      búsqueda avanzada
      <br />
      <a href="#" onclick="queryStringBusqueda('avanzada');return false;" id="lnkBusquedAvanzada">(compañía,
        clase, etc...)</a>
    </div>
    <div id="divbtnnBuscar" style="margin: 5px 10px 30px 380px; font-family: Verdana;
      font-size: 9px;">
      <input type="button" value="buscar" id="btnBuscar" onclick="queryStringBusqueda('normal');"
        style="border-style: solid 1px; border-width: 1px;" />
    </div>
  </div>
  <input type="hidden" id="hdnIATAIda" />
  <input type="hidden" id="hdnIATARegreso" />
  </form>
</body>
</html>

URL: http://goviajes.es/BuscadorVuelos.htm

Zeromm · #2 (**permalink**) 21/05/2015, 10:53

Lo mejor es que busques demos de formularios en popups.

Aqui un ejemplo

herzbazi · #3 (**permalink**) 21/05/2015, 10:55

en lo personal creo que deberías de usar bootstrap para poder lograr fácilmente este efecto y ademas de eso poder estandarizar el código ,

http://getbootstrap.com/javascript/#modals

ahora bien si no quieres usar este framework de maquetación

podrias usar esto

http://www.tubetrucos.com/2012/06/mo...-ventanas.html

si necesitas ayuda con la implementación me dices y veremos que podemos hacer

bonito día

T4ke0veR · #4 (**permalink**) 21/05/2015, 11:32

Gracias por sus aportes.... Muy utiles...

Una pregunta... Si coloco ese formulario en un iframe ya que lo usare en wordpress tambien funciona?

herzbazi · #5 (**permalink**) 21/05/2015, 11:39

Cita:

Iniciado por T4ke0veR

Gracias por sus aportes.... Muy utiles...

Una pregunta... Si coloco ese formulario en un iframe ya que lo usare en wordpress tambien funciona?

recuerda que todo es posible en este mundo , asi quela respuesta es si debe de funcionar , el tema es que lo acomodes para que te funcione.

T4ke0veR · #6 (**permalink**) 21/05/2015, 19:20

Muchachos.. Estoy usando lytebox y no em anda... Usando en el código del main el JS como dice en las instrucciones y en el iframe ambos el JS y el CSS les muestro

Código PHP:

  <?php

/**

 * @package WordPress

 * @subpackage Traveler

 * @since 1.0

 *

 * Header

 *

 * Created by ShineTheme

 *

 */

 
?>

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

    <meta charset="<?php bloginfo( 'charset' ); ?>">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="profile" href="http://gmpg.org/xfn/11">

    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <script src="js/bsn.AutoSuggest_c_2.0.js" type="text/javascript"></script>

  <link href="css/autosuggest_inquisitor.css" rel="stylesheet" type="text/css" charset="utf-8" />

  <script language="javascript" type="text/javascript">

    //Direccion del microsite donde enviaremos los datos

    var urlMicroSite = "http://goviajes.aramix.es/acceso.aspx";

  </script>

  <script src="js/util.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript" src="http://www.goviajes.es/lytebox.js"></script>

 
    <?php wp_head(); ?>

    

</head>

<body <?php body_class(); ?> id="body">

    <?php do_action('before_body_content')?>

<div class="global-wrap <?php echo apply_filters('st_container',true) ?>">

<div class="row">

    <header id="main-header">

        <div class="header-top">

            <div class="container">

                <div class="row">

                    <div class="col-md-3">

                        <a class="logo" href="<?php echo site_url('/')?>">

                            <img src="<?php echo st()->get_option('logo',get_template_directory_uri().'/img/logo-invert.png') ?>" alt="logo" title="<?php bloginfo('name')?>">

                        </a>

                    </div>

                    <?php get_template_part('users/user','nav');?>

                </div>

            </div>

        </div>

        <div class="main_menu_wrap">

            <div class="container">

                <div class="nav" align="right">

                    <?php if(has_nav_menu('primary')){

                        wp_nav_menu(array('theme_location'=>'primary',

                                            "container"=>"",

                                            'items_wrap'      => '<ul id="slimmenu" class="%2$s slimmenu">%3$s</ul>',

                        ));

                    }

                    ?>

                </div>

            </div>

        </div><!-- End .main_menu_wrap-->

    </header>

Archivo iframe

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="js/bsn.AutoSuggest_c_2.0.js" type="text/javascript"></script>
  <link href="css/autosuggest_inquisitor.css" rel="stylesheet" type="text/css" charset="utf-8" />
  <link href="base.css" rel="stylesheet" type="text/css" charset="utf-8" />
 <script type="text/javascript" language="javascript" src="lytebox.js"></script>
  <script language="javascript" type="text/javascript">
    //Direccion del microsite donde enviaremos los datos
    var urlMicroSite = "http://goviajes.aramix.es/acceso.aspx";
  </script>
  <script src="js/util.js" type="text/javascript"></script>
</head>
<body onload="cargarElementos();" id="body">
  <form action="" class="CriteriosAereo">
  <div align="center" class="btngrisbl24" id="divbuscador" style="border: solid 1px; width: 525px; height: 300px;">
    <div id="divcabecera" style="font-family: Verdana; margin: 5px 5px 5px 10px; font-size: 14px;" >
      BUSCAR VUELOS
    </div>
    <div id="divbusqueda" style="padding-left: 2px; padding-bottom: 3px; font-family: Verdana; font-size: 11px;
      border: 1px solid; margin: 10px 10px 10px 10px;">
      buscar:
      <input type="radio" name="rbtnIdaVuelta" checked="checked" id="rbtnIdaVuelta" onclick="cargarElementos(lstMesIda.value,lstDiaIda.selectedIndex,lstMesIda.selectedIndex);cambiodeMes(lstDiaIda.length,lstDiaIda.value,lstMesIda.selectedIndex);muestraDivVuelta();" /> 
      <label style="padding-right:15px;">ida y vuelta</label>
      <input type="radio" name="rbtnIdaVuelta" id="rbtnIda" onclick="cargarElementos(lstMesIda.value,lstDiaIda.selectedIndex,lstMesIda.selectedIndex);ocultarDivVuelta();" />
      <label style="padding-right:15px;">sólo ida </label>
        <input type="radio" name="rbtnIdaVuelta" id="rbtnMultiple" onclick="queryStringBusqueda('multidestino');" />
        <a href="#"  class="lytebox" data-lyte-options="width:700 height:450 scrollbars:no" onclick="queryStringBusqueda('multidestino');return false;">
       múltiples destinos</a>
    </div>
    <div id="divlbldestinos" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label style="margin-right: 110px;">
        aeropuerto salida:</label>
      <label id="lbldestino">
       aeropuerto destino:</label>
    </div>
    <div id="divdestinos" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <input type="text" class="btngrisbl24Buscar" id="txtIATAIda" style="width: 200px;" onchange="vaciarHdnIATAIda();" onclick="this.select();" />
      <input id="txtIATARegreso" onclick="this.select();" onchange="vaciarHdnIATARegreso();" type="text" style="width: 200px; margin-left:5px;"/>
    </div>
    <div id="divlblfechasalida" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label>
        fecha salida:</label>
    </div>
    <div id="divfsalida" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <select name="lstDiaIda" id="lstDiaIda" size="1" onchange="igualarFecha(this.selectedIndex,lstMesIda.value,lstMesIda.selectedIndex,lstMesRegreso.selectedIndex,lstDiaRegreso.selectedIndex);"
        style="width: 40px;">
      </select>
      <select name="lstMesIda" id="lstMesIda" size="1" onchange="cargarDiasIda(this.value,lstDiaIda.selectedIndex,this.selectedIndex);igualarFecha(lstDiaIda.selectedIndex,this.value,this.selectedIndex,lstMesRegreso.selectedIndex,lstDiaRegreso.selectedIndex);"
        style="width: 130px;">
      </select>
    </div>
    <div id="divlblfecharegreso" style="margin: 0px 10px 0px 10px; font-family: Verdana;
      font-size: 11px;">
      <label>
        fecha regreso:</label>
    </div>
    <div id="divfregreso" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <select name="lstDiaRegreso" id="lstDiaRegreso" size="1" style="width: 40px;" onblur="regresoDespuesIda();">
      </select>
      <select name="lstMesRegreso" id="lstMesRegreso" size="1" onchange="cargarDiasVuelta(this.value,lstDiaRegreso.selectedIndex);" onblur="regresoDespuesIda();"
        style="width: 130px;">
      </select>
    </div>
    <div id="divpasajeros" style="margin: 0px 20px 0px 10px; font-family: Verdana; font-size: 11px;">
      adultos:
      <select name="lstAdultos" id="cmbAdultos" size="1">
        <option value="1" selected="selected">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      niños:
      <select name="lstNinos" id="cmbChilds" size="1">
        <option value="0" selected="selected">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      bebés:
      <select name="lstBebes" id="cmbInfants" size="1">
        <option value="0" selected="selected">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
    </div>
    <div id="divedades" style="margin: 0px 10px 10px 10px; font-family: Verdana; font-size: 11px;">
      <label style="margin-right: 50px;">
        (+12)</label>
      <label style="margin-right: 35px;">
        (0-11)</label>
      <label>
        (0-23 meses)</label>
    </div>
    <div id="divBAvanzada" style="margin: 0px 10px 0px 10px; font-family: Verdana; font-size: 11px;">
      búsqueda avanzada
      <br />
      <a href="#" class="lytebox" data-lyte-options="width:700 height:450 scrollbars:no" onclick="queryStringBusqueda('avanzada');return false;" id="lnkBusquedAvanzada">(compañía,
        clase, etc...)</a>
    </div>
    <div id="divbtnnBuscar" style="margin: 5px 10px 30px 380px; font-family: Verdana;
      font-size: 9px;">
      <input type="button" value="buscar" id="btnBuscar"  class="lytebox" data-lyte-options="width:700 height:450 scrollbars:no" onclick="queryStringBusqueda('normal');"
        style="border-style: solid 1px; border-width: 1px;" />
    </div>
  </div>
  <input type="hidden" id="hdnIATAIda" />
  <input type="hidden" id="hdnIATARegreso" />
  </form>
</body>
</html>

Alguien ve mi error?