I have been trying to implement 2 Seperate Contact Modals based off an original contact.js which only supports 1 Contact Modal.
Here is the SimpleModal Plugin Project Page: http://www.ericmmartin.com/projects/simplemodal/
Here is my implementation with the original modal and the new modal which appears normal:
http://jsfiddle.net/NinjaSk8ter/TEUsx/
I’m having a problem because the contact.js JavaScript utilizes those Control Elements from the Original Modal: ‘#modal-contact-form’
‘contact-name’ ‘contact-email’ ‘contact-subject’ ‘contact-message’
‘contact-cc’ ‘tokenValue’
I am trying to add a 2nd Modal form: ‘#modal-soporte-form’
I added ‘modal-soporte-form’ within the contact.js and the following new Control Elements within the html:
‘contact-name2’ ‘contact-email2’ ‘contact-subject2’ ‘contact-message2’
‘contact-cc2’ ‘tokenValue2’
However, Im unsure about how to reference these Control Id’s throught the DOM within the contact.js.
The original plugin harcodes the selector to elements with various ids (“#contact-xxx”) which is not re-usable for my 2nd Modal. It was suggested to instead use classes which are relative to the DOM element.
According to the Project Page: http://www.ericmmartin.com/projects/simplemodal/
A modal dialog can be created as a stand-alone function,by passing a jQuery object or a DOM element:
$.modal("<div><h1>SimpleModal</h1></div>");
But I am very clueless about how to do this.
How can the DOM take into account different control names?
Here is the contact.js:
jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.consultcontacto, a.consultcontacto').click(function (e) {
e.preventDefault();
// Create the 1st Modal dialog with the data
$('#modal-contact-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
maxHeight: 62,
maxWidth: 62,
minHeight: 62,
minWidth: 62,
position: [138, 383],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
$('#contact-form input.suportecontacto, a.suportecontacto').click(function (e) {
e.preventDefault();
// Create the 2nd Modal dialog with the data
$('#modal-soporte-form').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
maxHeight: 62,
maxWidth: 62,
minHeight: 62,
minWidth: 62,
position: [138, 383],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
},
open: function (dialog) {
// add padding to the buttons in firefox/mozilla
if ($.browser.mozilla) {
$('#contact-container .contact-button').css({
'padding-bottom': '2px'
});
}
// input field font size
if ($.browser.safari) {
$('#contact-container .contact-input').css({
'font-size': '.9em'
});
}
// Dynamically determine Modal Height
//var h = 280;
var h = 220;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}
var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Cargando...');
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');
});
// fix png's for IE 6
if ($.browser.msie && $.browser.version < 7) {
$('#contact-container .contact-button').each(function () {
if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
var src = RegExp.$1;
$(this).css({
backgroundImage: 'none',
filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
});
}
});
}
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
var form = $('#contact-container form');
// 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: form[0].action,
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('Gracias!');
msg.html(data).fadeIn(200);
setTimeout(function () {
contact.close(dialog);
}, 1500);
});
},
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('Cerrando...');
$('#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 += 'Name is required. ';
}
var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'Email is required. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'Email is invalid. ';
}
}
if (!$('#contact-container #contact-message').val()) {
contact.message += 'Message is required.';
}
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();
});
Here is the html which illustrate the 2 Modals:
<html>
<head></head>
<body>
<form>
<div id="Soluciones_derecho2">
<div class="contactanos">
<div id="contact-button">
<div id='contact-form'>
<a class="consultcontacto" href="#"></a>
<a class="suportecontacto" href="#"></a>
</div>
</div>
</div>
</div>
</form>
<div id='modal-contact-form' style='display: none'>
<div class='contact-top'>
</div>
<div class='contact-content'>
<h1 class='contact-title'>Crea Su Nuevo Ticket:</h1>
<div class='contact-loading' style='display: none'>
</div>
<div class='contact-message' style='display: none'>
</div>
<form action='ModalContact1.aspx' style='display: none'>
<label for='contact-name'>
*Name:</label>
<input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email'>
*Email:</label>
<input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
<label for='contact-subject'>
Subject:</label>
<input type='text' id='contact-subject' class='contact-input' name='subject' value=''
tabindex='1003' />
<label for='contact-message'>
*Message:</label>
<textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4'
tabindex='1004'></textarea>
<br />
<label> </label>
<input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
<%--<span class='contact-cc'>Send me a copy</span>--%>
<br style="clear:both; line-height:0px;" />
<label> </label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>
Enviar</button>
<button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
Cancelar</button>
<br />
<input type="hidden" id="tokenValue" name="tokenValue" value="<%= new MailService().GetToken(0) %>" />
</form>
</div>
<div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
<div id='modal-soporte-form' style='display: none'>
<div class='contact-top'>
</div>
<div class='contact-content'>
<h1 class='contact-title'>Somete Su Proyecto Requisito:</h1>
<div class='contact-loading' style='display: none'>
</div>
<div class='contact-message' style='display: none'>
</div>
<form action='ModalContact2.aspx' style='display: none'>
<label for='contact-name2'>
*Nombre:</label>
<input type='text' id='contact-name2' class='contact-input' name='name' tabindex='1001' />
<label for='contact-email2'>
*Email:</label>
<input type='text' id='contact-email2' class='contact-input' name='email' tabindex='1002' />
<label for='contact-subject2'>
Tema:</label>
<input type='text' id='contact-subject2' class='contact-input' name='subject' value=''
tabindex='1003' />
<label for='contact-message2'>
*Mensaje:</label>
<textarea id='contact-message2' class='contact-input' name='message' cols='40' rows='4'
tabindex='1004'></textarea>
<br />
<label> </label>
<input type='checkbox' id='contact-cc2' name='cc' value='1' tabindex='1005' />
<br style="clear:both; line-height:0px;" />
<label> </label>
<button type='submit' class='contact-send contact-button' tabindex='1006'>
Enviar</button>
<button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
Cancelar</button>
<br />
<input type="hidden" id="tokenValue2" name="tokenValue" value="<%= new MailService().GetToken(0) %>" />
</form>
</div>
<div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
</body>
</html>
Here is the contact.css:
#contact-overlay { /* Overlay */
background-color:#000;
/*background-color: Green;*/
cursor:wait;
}
#contact-container { /* contact-container is the containerId defined in contact.js */
font-family: Arial;
font-size: 12px;
line-height: 18px; /* Height of space above and below all Text ie Labels */
text-align:left;
/*width:425px;*/ /* Modal Width */ /* Modal Height within contact.js */
width: 350px;
}
#contact-container .contact-content { /* contact-content is the class defined within class modal-contact-form within Site1.Master */
background-color: yellow;
/*background-color: #8C8C8C;*/
color:#666666;
/*height: 40px; */ /* height from point where modal rolls down */
}
#contact-container form {
margin: 0 0 0 0; /* margin of form controls */
padding: 0 0 0 0;
background-color: red;
}
#contact-container h1 { /* Text for Create Ticket & Goodbye */
/*color: #666666;*/
color: Black;
font-size: 13px;
line-height: 13px; /* Height of space above and below Text and overall */
margin: 0 0 0 0; /* Margin of container itself */
padding: 0 0 2px 68px; /* Padding for Text above and below Create Ticket & Goodbye */
text-align:left;
background-color: Green;
}
#contact-container label {
clear: left;
float: left;
display: block;
font-weight: bold;
padding: 0 4px 0 0; /* padding between Labels and Textboxes */
margin: 0 0 2px 0;
text-align: right;
width: 62px; /* width of Labels */
background-color: Lime;
}
#contact-container .contact-input {
background: #eee;
border: 1px solid #fff;
font-family: Arial;
float: left;
padding: 0 0 0 0;
margin: 0 0 2px 0;
/*width:300px;*/ /* width of textboxes */
width: 250px;
}
#contact-container textarea {
/*height:114px;*/ /* height of textarea */
height:108px;
}
#contact-container br {
clear:both;
}
#contact-container .contact-loading {
background:url(../Images/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:#000;
border:2px solid #ccc;
font-size:12px;
font-weight:bold;
line-height:18px;
margin:0 auto;
padding:2px;
width:92%;
}
#contact-container .contact-cc {
cursor:default;
font-size: 12px;
vertical-align:top;
background-color: Fuchsia;
margin: 0 0 0 0;
}
#contact-container .contact-button {
/*background: #d76300;*/ /* Color of Button */
background: black;
border: 0;
color: #fff; /* Color of Button Text */
cursor: pointer;
font-size: 12px;
font-weight: bold;
height: 19px; /* Height of Button */
width: 58px;
margin: 0 0 2px 0;
text-align: center;
vertical-align: middle;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
/*border-radius:8px;*/
}
#contact-container .contact-button:hover {
background:#f49000;
}
#contact-container a.modal-close { /* modal-close is defined in contact.js */
color: gray;
font-family: Arial; /* Text for Cierra Ticket */
font-size: 11px;
font-weight: bold;
position: absolute;
text-decoration: none;
right: 8px;
top: -2px;
}
#contact-container a.modal-close:link {
color: gray;
text-decoration: none;
}
#contact-container a.modal-close:visited {
color: #999;
text-decoration: none;
}
#contact-container a.modal-close:hover {
color: gray;
text-decoration: underline;
}
#contact-container a.modal-close:active {
color: #999;
text-decoration: none;
}
#contact-container .contact-top {
/*background-color:#333;*/
background-color:orange;
height:13px;
margin:0;
padding:0;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
/*border-radius: 8px 8px 0 0; */
}
#contact-container .contact-bottom {
/*background-color:#333;*/
background-color: Purple;
font-size:10px;
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;
}
I was able to implement 2 Seperate Contact Modals based off the Plugin:
http://www.ericmmartin.com/projects/simplemodal/
The contact.js had originally only supported 1 Contact Modal.
http://jsfiddle.net/NinjaSk8ter/TEUsx/