Formulário modal, Abrir por cima do index ao acessar o site

wanderson.PHW · Fevereiro 2, 2015

Olá amigos, estou com o seguinte problema; peguei um modelo de Formulario de contato Modal, só que preciso fazer as seguintes modificações; eu vi em alguns sites e gostaria de colocar no meu também, ele esta funcionando e tudo, porém eu queria colocar esse modal para aparecer na pagina incial automaticamente ou seja, sobre a pagina index.asp, esse é um dos meus problemas, o outro é que ao terminar de preencher o formulario e clicar em enviar, gostaria que automaticamente se fechasse o modal e enviasse um e-mail com os dados do formulario em um unico click, somente assim o usuário terá acesso ao meu site, Quem puder me ajudar agradeço pois estou tentando fazer esse modal e empaquei nessa parte e não acho a solução.

esse é o js do meu modal:

jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
e.preventDefault();

// load the contact form using ajax
$.get("data/contact.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'></a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
},
open: function (dialog) {
// dynamically determine height
var h = 280;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}

var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Carregando...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();

$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Enviando...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
$('#contact-container .contact-loading').fadeIn(200, function () {
$.ajax({
url: 'data/contact.php',
data: $('#contact-container form').serialize() + '&action=send',
type: 'post',
cache: false,
dataType: 'html',
success: function (data) {
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Obrigado!');
msg.html(data).fadeIn(200);
});
},
error: contact.error
});
});
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}

}
});
},
close: function (dialog) {
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('Até logo...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validate: function () {
contact.message = '';
if (!$('#contact-container #contact-name').val()) {
contact.message += 'O seu nome é obrigatório. ';
}

var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'O seu e-mail é obrigatório. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'E-mail Inválido. ';
}
}

if (!$('#contact-container #contact-message').val()) {
contact.message += 'A Sua Mensagem é obrigatória.';
}

if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("@");

// Make sure the at (@) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;

// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;

// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);

// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;

// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;

// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}

// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;

return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};

contact.init();

});

wilnet · Fevereiro 2, 2015

Olá, wandersom, blza!

Veja esse exemplo.

http://jsfiddle.net/wilnet/1yo38qtn/1/

1) A Modal abre assim que a Página é carregada;

2) A Modal fica Bloqueada até ser Clicada no Botão;

3) Agora é só vc implementar o conteúdo dentro dessa Modal;

4) Quanto ao envio do e-mail, basta vc fazer o disparo após ser preenchido e clicado, usando seu componente para isso.

Espero ter ajudado,

vlw

wanderson.PHW · Fevereiro 3, 2015

Bom dia amigo, blz,

Então, eu testei e mas não funcionou, ele exibe apenas um formulario simples com campos de nome e email mas não abre em modal, vou postar todo o material do que eu fiz e veja no que eu estou errando, assim fica mais facil para você me ajudar;

index.html

<!DOCTYPE html>
<html>
<head>
<title> SimpleModal Contact Form </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2013 - Eric Martin' />

<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />

<!-- Contact Form CSS files -->
<link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />

<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Formulario modal </h1>
</div>
<div id='content'>
<div id='contact-form'>
<h3>Formulário de contato </h3>
<p>Um formulário de contato construido sobre simple modal demonstra a utilização do <code>onOpen</code>, <code>onShow</code> e <code>onClose</code> callbacks, assim como a utilização de Ajax e SimpleModal.</p>
<p>Para Usar : Abra <code>data/contact.php</code> e modifique o <code>$to</code> e <code>$subject</code> valores. Para habilitar e desabilitar informações sobre o usuário, configure o <code>$extra</code> ordem.</p>
<p><strong>Nota:</strong> Esta demonstração deve ser executado a partir de um servidor web com PHP habilitado. </p>
<pre data-placeholder="Tradução" id="tw-target-text" data-fulltext="" dir="ltr"> </pre>
<input type='button' name='contact' value='Demo' class='contact demo'/>
or <a href='#' class='contact'>Demo</a></div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/contact/loading.gif' alt='' />
</div>
</div>
<div id='footer'>
Desenvolvidor: Wandersom Rodrigues <a href='https://github.com/ericmmartin/simplemodal'></a><br/>
<a href='http://twitter.com/ericmmartin'>wandersomrl@hotmail.com</a><a href='http://twitter.com/simplemodal'></a>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/contact.js'></script>
</body>
</html>

js/contact.js

Query(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
e.preventDefault();

// load the contact form using ajax
$.get("data/contact.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'></a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
},
open: function (dialog) {
// dynamically determine height
var h = 280;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}

var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Carregando...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();

$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Enviando...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
$('#contact-container .contact-loading').fadeIn(200, function () {
$.ajax({
url: 'data/contact.php',
data: $('#contact-container form').serialize() + '&action=send',
type: 'post',
cache: false,
dataType: 'html',
success: function (data) {
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Obrigado!');
msg.html(data).fadeIn(200);
});
},
error: contact.error
});
});
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}

}
});
},
close: function (dialog) {
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('Até logo...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validate: function () {
contact.message = '';
if (!$('#contact-container #contact-name').val()) {
contact.message += 'O seu nome é obrigatório. ';
}

var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'O seu e-mail é obrigatório. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'E-mail Inválido. ';
}
}

if (!$('#contact-container #contact-message').val()) {
contact.message += 'A Sua Mensagem é obrigatória.';
}

if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("@");

// Make sure the at (@) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;

// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;

// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);

// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;

// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;

// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}

// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;

return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};

contact.init();

});

css/contact.css

/*
* SimpleModal Contact Form
* http://simplemodal.com
*
* Copyright (c) 2013 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/

/* Overlay */
#contact-overlay {background-color:#000;}

/* Container */
#contact-container {font: 16px/22px 'Trebuchet MS', Verdana, Arial; text-align:left; width:450px;}
#contact-container .contact-content {background-color:#ffffff; color:#555555; height:40px;}
#contact-container h1 {color:#555555; font-size:20px; line-height:20px; margin:0; padding:0 0 6px 12px; text-align:left;}
#contact-container .contact-loading {background:url(../img/contact/loading.gif) no-repeat; height:55px; margin:-14px 0 0 190px; padding:0; position:absolute; width:54px; z-index:8000;}
#contact-container .contact-message {text-align:center;}
#contact-container .contact-error {background-color:#ffffff; color:#ff0000; border:2px solid #ffffff; font-size:12px; font-weight:bold; line-height:12px; margin:0 auto; padding:2px; width:92%;}
#contact-container br {clear:both;}
#contact-container form {margin:0; padding:0;}
#contact-container label {clear:left; display:block; float:left; font-weight:bold; padding-right:4px; text-align:right; width:100px;}
#contact-container .contact-input {background:#ffffff; border:1px solid #555555; font-family:'Trebuchet MS', Verdana, Arial; float:left; padding:2px; margin:2px; width:300px;}
#contact-container textarea {height:114px;}
#contact-container .contact-cc {cursor:default; font-size:14px; vertical-align:top;}
#contact-container .contact-top {background-color:#ffffff; height:13px; margin:0; padding:0; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; -moz-border-radius-topleft:8px; -moz-border-radius-topright:8px; border-radius:8px 8px 0 0;}
#contact-container .contact-bottom {background-color:#ffffff; font-size:12px; height:13px; line-height:12px; text-align:center; -webkit-border-bottom-right-radius:8px; -webkit-border-bottom-left-radius:8px; -moz-border-radius-bottomright:8px; -moz-border-radius-bottomleft:8px; border-radius:0 0 8px 8px;}
#contact-container .contact-bottom a,
#contact-container .contact-bottom a:link,
#contact-container .contact-bottom a:active,
#contact-container .contact-bottom a:visited {color:#666; position:relative; top:-4px; text-decoration:none;}
#contact-container .contact-bottom a:hover {color:#888;}
#contact-container .contact-button {background:#004080; border:0; color:#fff; cursor:pointer; font-size:16px; font-weight:bold; height:26px; margin:4px 0 0 4px; text-align:center; vertical-align:middle; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
#contact-container .contact-button:hover {background:#777777;}
#contact-container a.modal-close,
#contact-container a.modal-close:link,
#contact-container a.modal-close:active,
#contact-container a.modal-close:visited {color:#999; font-size:18px; font-weight:bold; position:absolute; text-decoration:none; right:8px; top:0px;}
#contact-container a.modal-close:hover {color:#ccc;}

data/modal.php

<?php

/*

*
* Copyright (c) 2013 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*/

date_default_timezone_set('America/Los_Angeles');

// User settings
$to = "email@dominiodestinatario.com.br";
$subject = "wandersomrl@hotmail.com";

// Include extra form fields and/or submitter data?
// false = do not include
$extra = array(
"form_subject" => true,
"form_cc" => true,
"ip" => true,
"user_agent" => true
);

// Process
$action = isset($_POST["action"]) ? $_POST["action"] : "";
if (empty($action)) {
// Send back the contact form HTML
$output = "<div style='display:none'>
<div class='contact-top'></div>
<div class='contact-content'>
<h1 class='contact-title'>Cadastro de Acesso:</h1>
<div class='contact-loading' style='display:none'></div>
<div class='contact-message' style='display:none'></div>
<form action='#' style='display:none'>
<label for='contact-name'>Nome:</label>
<input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email'>E-mail:</label>
<input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />";

if ($extra["form_subject"]) {
$output .= "
<label for='contact-subject'>Assunto:</label>
<input type='text' id='contact-subject' class='contact-input' name='subject' value='' tabindex='1003' />";
}

$output .= "
<label for='contact-message'>Mensagem:</label>
<textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4' tabindex='1004'></textarea>
<br/>";

if ($extra["form_cc"]) {
$output .= "
<label> </label>




<br/>";
}

$output .= "
<label> </label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>Enviar</button>

<br/>
<input type='hidden' name='token' value='" . smcf_token($to) . "'/>
</form>
</div>
<div class='contact-bottom'><a href=''></a></div>
</div>";

echo $output;
}
else if ($action == "send") {
// Send the email
$name = isset($_POST["name"]) ? $_POST["name"] : "";
$email = isset($_POST["email"]) ? $_POST["email"] : "";
$subject = isset($_POST["subject"]) ? $_POST["subject"] : $subject;
$message = isset($_POST["message"]) ? $_POST["message"] : "";
$cc = isset($_POST["cc"]) ? $_POST["cc"] : "";
$token = isset($_POST["token"]) ? $_POST["token"] : "";

// make sure the token matches
if ($token === smcf_token($to)) {
smcf_send($name, $email, $subject, $message, $cc);
echo "Sua mensagem foi enviada com sucesso.";
}
else {
echo "Infelizmente, a sua mensagem não pôde ser verificada.";
}
}

function smcf_token($s) {
return md5("smcf-" . $s . date("WY"));
}

// Validate and send email
function smcf_send($name, $email, $subject, $message, $cc) {
global $to, $extra;

// Filter and validate fields
$name = smcf_filter($name);
$subject = smcf_filter($subject);
$email = smcf_filter($email);
if (!smcf_validate_email($email)) {
$subject .= " - invalid email";
$message .= "\n\nBad email: $email";
$email = $to;
$cc = 0; // do not CC "sender"
}

// Add additional info to the message
if ($extra["ip"]) {
$message .= "\n\nIP: " . $_SERVER["REMOTE_ADDR"];
}
if ($extra["user_agent"]) {
$message .= "\n\nUSER AGENT: " . $_SERVER["HTTP_USER_AGENT"];
}

// Set and wordwrap message body
$body = "From: $name\n\n";
$body .= "Message: $message";
$body = wordwrap($body, 70);

// Build header
$headers = "From: $email\n";
if ($cc == 1) {
$headers .= "Cc: $email\n";
}
$headers .= "X-Mailer: PHP/SimpleModalContactForm";

// UTF-8
if (function_exists('mb_encode_mimeheader')) {
$subject = mb_encode_mimeheader($subject, "UTF-8", "B", "\n");
}
else {
// you need to enable mb_encode_mimeheader or risk
// getting emails that are not UTF-8 encoded
}
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-type: text/plain; charset=utf-8\n";
$headers .= "Content-Transfer-Encoding: quoted-printable\n";

// Send email
@mail($to, $subject, $body, $headers) or
die("Infelizmente, um problema de servidor.");
}

// Remove any un-safe values to prevent email injection
function smcf_filter($value) {
$pattern = array("/\n/","/\r/","/content-type:/i","/to:/i", "/from:/i", "/cc:/i");
$value = preg_replace($pattern, "", $value);
return $value;
}

// Validate email address format in case client-side validation "fails"
function smcf_validate_email($email) {
$at = strrpos($email, "@");

// Make sure the at (@) sybmol exists and
// it is not the first or last character
if ($at && ($at < 1 || ($at + 1) == strlen($email)))
return false;

// Make sure there aren't multiple periods together
if (preg_match("/(\.{2,})/", $email))
return false;

// Break up the local and domain portions
$local = substr($email, 0, $at);
$domain = substr($email, $at + 1);


// Check lengths
$locLen = strlen($local);
$domLen = strlen($domain);
if ($locLen < 1 || $locLen > 64 || $domLen < 4 || $domLen > 255)
return false;

// Make sure local and domain don't start with or end with a period
if (preg_match("/(^\.|\.$)/", $local) || preg_match("/(^\.|\.$)/", $domain))
return false;

// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!preg_match('/^"(.+)"$/', $local)) {
// It's a dot-string address...check for valid characters
if (!preg_match('/^[-a-zA-Z0-9!#$%*\/?|^{}`~&\'+=_\.]*$/', $local))
return false;
}

// Make sure domain contains only valid characters and at least one period
if (!preg_match("/^[-a-zA-Z0-9\.]*$/", $domain) || !strpos($domain, "."))
return false;

return true;
}

exit;

?>

js/jquery.simplemodal.js

/*
* SimpleModal 1.4.4 - jQuery Plugin
* http://simplemodal.com/
* Copyright (c) 2013 Eric Martin
* Licensed under MIT and GPL
* Date: Sun, Jan 20 2013 15:58:56 -0800
*/
(function({"function"===typeof define&&define.amd?define(["jquery"],:b(jQuery)})(function({var j=[],n=b(document),k=navigator.userAgent.toLowerCase(),l=b(window),g=[],o=null,p=/msie/.test(k)&&!/opera/.test(k),q=/opera/.test(k),m,r;m=p&&/msie 6./.test(k)&&"object"!==typeof window.XMLHttpRequest;r=p&&/msie 7.0/.test(k);b.modal=function(a,h){return b.modal.impl.init(a,h)};b.modal.close=function(){b.modal.impl.close()};b.modal.focus=function(a){b.modal.impl.focus(a)};b.modal.setContainerDimensions=
function(){b.modal.impl.setContainerDimensions()};b.modal.setPosition=function(){b.modal.impl.setPosition()};b.modal.update=function(a,h){b.modal.impl.update(a,h)};b.fn.modal=function(a){return b.modal.impl.init(this,a)};b.modal.defaults={appendTo:"body",focus:!0,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:!1,autoPosition:!0,zIndex:1E3,
close:!0,closeHTML:'<a class="modalCloseImg" title="Close"></a>',closeClass:"simplemodal-close",escClose:!0,overlayClose:!1,fixed:!0,position:null,persist:!1,modal:!0,onOpen:null,onShow:null,onClose:null};b.modal.impl={d:{},init:function(a,h){if(this.d.data)return!1;o=p&&!b.support.boxModel;this.o=b.extend({},b.modal.defaults,h);this.zIndex=this.o.zIndex;this.occb=!1;if("object"===typeof a){if(a=a instanceof b?a:b(a),this.d.placeholder=!1,0<a.parent().parent().size()&&(a.before(b("<span></span>").attr("id",
"simplemodal-placeholder").css({display:"none"})),this.d.placeholder=!0,this.display=a.css("display"),!this.o.persist))this.d.orig=a.clone(!0)}else if("string"===typeof a||"number"===typeof a)a=b("<div></div>").html(a);else return alert("SimpleModal Error: Unsupported data type: "+typeof a),this;this.create(a);this.open();b.isFunction(this.o.onShow)&&this.o.onShow.apply(this,[this.d]);return this},create:function(a){this.getDimensions();if(this.o.modal&&m)this.d.iframe=b('<iframe src="javascript:false;"></iframe>').css(b.extend(this.o.iframeCss,
{display:"none",opacity:0,position:"fixed",height:g[0],width:g[1],zIndex:this.o.zIndex,top:0,left:0})).appendTo(this.o.appendTo);this.d.overlay=b("<div></div>").attr("id",this.o.overlayId).addClass("simplemodal-overlay").css(b.extend(this.o.overlayCss,{display:"none",opacity:this.o.opacity/100,height:this.o.modal?j[0]:0,width:this.o.modal?j[1]:0,position:"fixed",left:0,top:0,zIndex:this.o.zIndex+1})).appendTo(this.o.appendTo);this.d.container=b("<div></div>").attr("id",this.o.containerId).addClass("simplemodal-container").css(b.extend({position:this.o.fixed?
"fixed":"absolute"},this.o.containerCss,{display:"none",zIndex:this.o.zIndex+2})).append(this.o.close&&this.o.closeHTML?b(this.o.closeHTML).addClass(this.o.closeClass):"").appendTo(this.o.appendTo);this.d.wrap=b("<div></div>").attr("tabIndex",-1).addClass("simplemodal-wrap").css({height:"100%",outline:0,width:"100%"}).appendTo(this.d.container);this.d.data=a.attr("id",a.attr("id")||this.o.dataId).addClass("simplemodal-data").css(b.extend(this.o.dataCss,{display:"none"})).appendTo("body");this.setContainerDimensions();
this.d.data.appendTo(this.d.wrap);(m||o)&&this.fixIE()},bindEvents:function(){var a=this;b("."+a.o.closeClass).bind("click.simplemodal",function({b.preventDefault();a.close()});a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind("click.simplemodal",function({b.preventDefault();a.close()});n.bind("keydown.simplemodal",function({a.o.modal&&9===b.keyCode?a.watchTab(:a.o.close&&a.o.escClose&&27===b.keyCode&&(b.preventDefault(),a.close())});l.bind("resize.simplemodal orientationchange.simplemodal",
function(){a.getDimensions();a.o.autoResize?a.setContainerDimensions():a.o.autoPosition&&a.setPosition();m||o?a.fixIE():a.o.modal&&(a.d.iframe&&a.d.iframe.css({height:g[0],width:g[1]}),a.d.overlay.css({height:j[0],width:j[1]}))})},unbindEvents:function(){b("."+this.o.closeClass).unbind("click.simplemodal");n.unbind("keydown.simplemodal");l.unbind(".simplemodal");this.d.overlay.unbind("click.simplemodal")},fixIE:function(){var a=this.o.position;b.each([this.d.iframe||null,!this.o.modal?null:this.d.overlay,
"fixed"===this.d.container.css("position")?this.d.container:null],function(b,e){if(e){var f=e[0].style;f.position="absolute";if(2>b)f.removeExpression("height"),f.removeExpression("width"),f.setExpression("height",'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"'),f.setExpression("width",'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"');else{var c,d;a&&a.constructor===
Array?(c=a[0]?"number"===typeof a[0]?a[0].toString():a[0].replace(/px/,""):e.css("top").replace(/px/,""),c=-1===c.indexOf("%")?c+' + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"':parseInt(c.replace(/%/,""))+' * ((document.documentElement.clientHeight || document.body.clientHeight) / 100) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',a[1]&&(d="number"===typeof a[1]?
a[1].toString():a[1].replace(/px/,""),d=-1===d.indexOf("%")?d+' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"':parseInt(d.replace(/%/,""))+' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"')):(c='(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"',
d='(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"');f.removeExpression("top");f.removeExpression("left");f.setExpression("top",c);f.setExpression("left",d)}}})},focus:function(a){var h=this,a=a&&-1!==b.inArray(a,["first","last"])?a:"first",e=b(":input:enabled:visible:"+a,h.d.wrap);setTimeout(function(){0<e.length?e.focus():h.d.wrap.focus()},
10)},getDimensions:function(){var a="undefined"===typeof window.innerHeight?l.height():window.innerHeight;j=[n.height(),n.width()];g=[a,l.width()]},getVal:function(a,{return a?"number"===typeof a?a:"auto"===a?0:0<a.indexOf("%")?parseInt(a.replace(/%/,""))/100*("h"===b?g[0]:g[1]):parseInt(a.replace(/px/,"")):null},update:function(a,{if(!this.d.data)return!1;this.d.origHeight=this.getVal(a,"h");this.d.origWidth=this.getVal(b,"w");this.d.data.hide();a&&this.d.container.css("height",a);b&&this.d.container.css("width",
;this.setContainerDimensions();this.d.data.show();this.o.focus&&this.focus();this.unbindEvents();this.bindEvents()},setContainerDimensions:function(){var a=m||r,b=this.d.origHeight?this.d.origHeight:q?this.d.container.height():this.getVal(a?this.d.container[0].currentStyle.height:this.d.container.css("height"),"h"),a=this.d.origWidth?this.d.origWidth:q?this.d.container.width():this.getVal(a?this.d.container[0].currentStyle.width:this.d.container.css("width"),"w"),e=this.d.data.outerHeight(!0),f=
this.d.data.outerWidth(!0);this.d.origHeight=this.d.origHeight||b;this.d.origWidth=this.d.origWidth||a;var c=this.o.maxHeight?this.getVal(this.o.maxHeight,"h"):null,d=this.o.maxWidth?this.getVal(this.o.maxWidth,"w"):null,c=c&&c<g[0]?c:g[0],d=d&&d<g[1]?d:g[1],i=this.o.minHeight?this.getVal(this.o.minHeight,"h"):"auto",b=b?this.o.autoResize&&b>c?c:b<i?i:b:e?e>c?c:this.o.minHeight&&"auto"!==i&&e<i?i:e:i,c=this.o.minWidth?this.getVal(this.o.minWidth,"w"):"auto",a=a?this.o.autoResize&&a>d?d:a<c?c:a:f?
f>d?d:this.o.minWidth&&"auto"!==c&&f<c?c:f:c;this.d.container.css({height:b,width:a});this.d.wrap.css({overflow:e>b||f>a?"auto":"visible"});this.o.autoPosition&&this.setPosition()},setPosition:function(){var a,b;a=g[0]/2-this.d.container.outerHeight(!0)/2;b=g[1]/2-this.d.container.outerWidth(!0)/2;var e="fixed"!==this.d.container.css("position")?l.scrollTop():0;this.o.position&&"[object Array]"===Object.prototype.toString.call(this.o.position)?(a=e+(this.o.position[0]||a),b=this.o.position[1]||:
a=e+a;this.d.container.css({left:b,top:a})},watchTab:function(a){if(0<b(a.target).parents(".simplemodal-container").length){if(this.inputs=b(":input:enabled:visible:first, :input:enabled:visible:last",this.d.data[0]),!a.shiftKey&&a.target===this.inputs[this.inputs.length-1]||a.shiftKey&&a.target===this.inputs[0]||0===this.inputs.length)a.preventDefault(),this.focus(a.shiftKey?"last":"first")}else a.preventDefault(),this.focus()},open:function(){this.d.iframe&&this.d.iframe.show();b.isFunction(this.o.onOpen)?
this.o.onOpen.apply(this,[this.d]):(this.d.overlay.show(),this.d.container.show(),this.d.data.show());this.o.focus&&this.focus();this.bindEvents()},close:function(){if(!this.d.data)return!1;this.unbindEvents();if(b.isFunction(this.o.onClose)&&!this.occb)this.occb=!0,this.o.onClose.apply(this,[this.d]);else{if(this.d.placeholder){var a=b("#simplemodal-placeholder");this.o.persist?a.replaceWith(this.d.data.removeClass("simplemodal-data").css("display",this.display)):(this.d.data.hide().remove(),a.replaceWith(this.d.orig))}else this.d.data.hide().remove();
this.d.container.hide().remove();this.d.overlay.hide();this.d.iframe&&this.d.iframe.hide().remove();this.d.overlay.remove();this.d={}}}}});

Se alguém montar igual ao meu, vai entender qual o meu problema.

wilnet · Fevereiro 3, 2015

Então, eu testei e mas não funcionou, ele exibe apenas um formulario simples com campos de nome e email mas não abre em modal,

Ele abre em Modal sim, veja melhor.

http://jsfiddle.net/wilnet/1yo38qtn/1/

Tente adapta-lo.

wanderson.PHW · Fevereiro 3, 2015

então, ali até aparece mas quando eu salvo aqui no meu pc e eu vejo pelo navegador iis, ele mostra sem efeitos, sou meio leigo nesse assunto de modal e css, me ajuda ai amigo.

wilnet · Fevereiro 3, 2015

Vc não deve ter usado o Jquery principal .

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 

<script type="text/javascript">
function open_modal( id ){
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
	
	$('#mask').css({'width':maskWidth,'height':maskHeight});
 
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.8);	
	
	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();
              
	$(id).css('top',  winH/2-$(id).height()/2);
	$(id).css('left', winW/2-$(id).width()/2);
	$(id).fadeIn(2000); 
};
$(document).ready(function() {	
	
	$('a[name=modal]').click(function(e) {
		e.preventDefault();
		open_modal( $(this).attr('href') );	
	});
	
	open_modal( '#dialog' );
	
	$('.window .close').click(function (e) {
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
});
</script>

<style type="text/css">
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px; 
  height:203px;
}

#dialog .d-header {
  width:375px; 
  height:150px;
}

#dialog .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog .d-blank {
  float:left;
  width:267px; 
  height:53px;
}

#dialog .d-login {
  float:left;
  width:108px; 
  height:53px;
}

.close{display:block; text-align:right;}

</style>

<h2>Janela Modal com jQuery</h2>

<div id="boxes">
<div id="dialog" class="window">
  <div class="d-header">
    <input type="text" value="nome" onclick="this.value=''"/><br/>
    <input type="text" value="email" onclick="this.value=''"/>
  </div>    
  <div class="d-blank"></div>
  <div class="d-login"><input class="close" type="button" value="Enviar"/></div>

</div>

<!-- Máscara para cobrir a tela -->
  <div id="mask"></div>

</div>

Monte uma página e teste.

wanderson.PHW · Fevereiro 3, 2015

Como que eu faço isso, com esse modelo que você postou agora, como salvo, e aonde salvo e com quais nomes ?

como disse, sou leigo nesse assunto.

wilnet · Fevereiro 3, 2015

Abra o Bloco de Notas, Dreamweaver ou qualquer editor de html.

Em seguida vá copiando cada arquivo postado acima: JavaScript - CSS - HTML

Depois salve como html com qualquer nome que desejar, será apenas para vc fazer o teste e visualizar o efeito da modal.

wanderson.PHW · Fevereiro 3, 2015

não funcionou, dei um print do navegador e dos arquivos que você pediu para eu criar, dê uma olhada;

Print da vizualização modal no navegador:

Print dos arquivos

dataset · Fevereiro 3, 2015

Não vai funcionar porque o wilnet te deu apenas um exemplo, você precisa montar a estrutura HTML e colocar o script dentro, no local apropriado.

Daí vai funcionar certinho.

Dá uma estudada em HTML e Script, em alguns minutos você vai saber exatamente o que fazer.

wanderson.PHW · Fevereiro 3, 2015

eu ja estudei html e javascript a mais de 2 anos, eu entendo a plataforma, só que eu entendo pouquissimo de css e jquery, pelo que pesquisei, esse comando modal funciona com css ou jquery, e não apenas com html e javascript, por isso tenho esses problemas, gostaria de um modelo igual ao que eu citei no começo desse tópico, o wilnet me passou um modelo acima, o link que ele colocou e pediu para mim testar, funciona, mas quando eu pego os codigos das paginas e salvo aqui no meu computador e acesso pelo meu servidor local ele não funciona como no modelo do wilnet, queria saber o que devo fazer para que ele funcione da maneira que eu queria no começo desse tópico, porque ainda não consegui resolver esse problema.

Arquivado

Formulário modal, Abrir por cima do index ao acessar o site

Recommended Posts

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wilnet 92

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dataset 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

wanderson.PHW 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

PHP+Codeigniter - Dúvida referente a PDV

Fóruns

Tempo Real

Informação importante