Lo que intento hacer, es poner la opacidad en un elemento que tiene como hijo a otro elemento, pero si se lo agrego al elemento padre el elemento hijo hereda esa opacidad y no quiero eso.
Quiero hacer que contrasten, para que el hijo se vea sin problemas y el padre dé un efecto de capa.
Codigo actual del padre:
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
position:'fixed',
width:'100%',
height:'100%',
top:'0px',
left:'0px',
zIndexIn: '1000',
zIndexOut: '-9999',
color: '#39BEB9',
opacityIn:'0.9', - Pongo una opacidad para el padre con el hijo
adentro
opacityOut:'0',
animatedIn:'zoomIn',
animatedOut:'zoomOut',
animationDuration:'.6s',
overflow:'auto',
Codigo del hijo:
<!-- multistep form -->
<form id="msform" style="opacity:1.0"> --------- Pongo una nueva opacidad
al Hijo
<!-- progressbar -->
<ul id="progressbar" style="margin-left:30%;">
<li class="active">Contacto</li>
<li>Evento</li>
<li>Banco</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Informacion de Contacto</h2>
<h3 class="fs-subtitle">Paso 1</h3>
<input type="text" name="nombre" placeholder="Ingrese su Nombre" />
<input type="text" name="apellidos" placeholder="Ingrese sus Apellidos" />
<input type="text" name="email" placeholder="Ingrese su correo electronico" />
<br>
<select class="selectpicker" >
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<br>
<button type="button" name="next" class="next action-button" value="Siguiente">
Siguiente   <i class="fa fa-chevron-right"></i></button>
</fieldset>
<fieldset>
<h2 class="fs-title">Informacion del Evento</h2>
<h3 class="fs-subtitle">Paso 2</h3>
<input type="text" name="evento" placeholder="Ingrese el nombre del evento" />
<input type="text" name="lugar" placeholder="Ingrese el lugar o Foro" />
<select class="selectpicker" >
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<br><br>
<select class="selectpicker" >
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<br><br>
<input type="number" name="secciones" placeholder="Ingrese las secciones" />
<input type="range" class="slider-input" value="23" />
<input type="text" name="boleto" placeholder="Ingrese el tipo de boleto" />
<textarea rows="5" name="comentario" placeholder="Ingrese algun comentario">
</textarea>
<button type="button" name="previous" class="previous action-button" value="Anterior">
<i class="fa fa-chevron-left"></i>   Anterior
</button>
<button type="button" name="next" class="next action-button" value="Siguiente">
Siguiente  <i class="fa fa-chevron-right"></i>
</button>
</fieldset>
<fieldset>
<h2 class="fs-title">Informacion Bancaria</h2>
<h3 class="fs-subtitle">Paso 3</h3>
<input type="text" name="nombre_asociado" placeholder="Ingrese el nombre Asociado" />
<input type="text" name="clabe" placeholder="Ingrese la CLABE" />
<input type="text" name="banco" placeholder="Ingrese el Banco" />
<input type="text" name="numero_tarjeta" placeholder="Ingrese el numero de tarjeta" />
<button type="button" name="previous" class="previous action-button" value="Anterior">
<i class="fa fa-chevron-left"></i>   Anterior
</button>
<button type="submit" name="submit" class="submit action-button" value="Enviar">
<i class="fa fa-paper-plane"></i>   Enviar
</button>
</fieldset>
</form>
En resumen, en estas dos lineas de código lo que hago es asignar una opacidad al padre y por ende al hijo, pero después le asigno una opacidad superior al hijo pero no la procesa de forma correcta.
Nota: Estoy usando la libreria de diseño (AnimatedModal.js)