Question

I would like to implement several Modals instead of just 1.

I’ve run into a problem because I would like to call the same jQuery(function ($) { }
This function is only set-up for a single named Anchor “consultcontacto” for this modal: modal-contact-form

However, I need to utilize a 2nd Anchor “suportecontacto” and then enable an entirely different modal: modal-contact-form2

Here is the Fiddle with the 2 Anchors however the JavaScript Function is only set-up for the the Anchor named “consultcontacto”:

http://jsfiddle.net/NinjaSk8ter/TEUsx/

I’m not sure if I would need to implement an entirely different function or just modify jQuery(function ($) { }

within WebGrupoDotNet.aspx is definition for 2 seperate Anchor Buttons:

<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

within soluciones.css:

#contact-button {
height: 40px;
width: 220px;
float: left;
position:relative;
margin: 7px 0 0 5px;
}

a.consultcontacto { 
height: 40px; 
width: 220px;
background-image: url("/images/Home/consultbuton3.png"); 
background-position:left bottom; /* 0px -27px; */ 
display: block;
font-size: 11px;
text-align: center;
}

a.consultcontacto:hover { 
/*background-position:left top; /*0px 0px;*/
}

a.suportecontacto {
height: 40px; 
width: 220px;
margin: 6px 0 0 0;
background-image: url("/images/Home/soportebuton2.png"); 
background-position:left bottom; /* 0px -27px; */ 
display: block;
font-size: 11px;
text-align: center;    
}

a.suportecontact:hover {
}

within contact.js, you can see where the function only enables for the single:
modal-contact-form:

jQuery(function ($) {
var contact = {
    message: null,
    init: function () {
        $('#contact-form input.consultcontacto, a.consultcontacto').click(function (e) {
            e.preventDefault();
            // Create the 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
            });
        });
    },

Answer 1

This fiddle only changes the name:

http://jsfiddle.net/rwtuH/5/

You had two :hover selectors and no .consultcontacto styling at all! I also went ahead and updated the contact var to be consultcontacto.

a.consultcontacto { /*Removed :hover*/
    height: 40px; 
    width: 220px;
    background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
}

Here is a fiddle and code that has both contact and consultcontacto:

http://jsfiddle.net/rwtuH/3/

JS

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

                // Create the 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: [50, 50],
                    overlayId: 'contact-overlay',
                    containerId: 'contact-container',
                    onOpen: consultcontacto.open,
                    onShow: consultcontacto.show,
                    onClose: consultcontacto.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 (consultcontacto.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 () {
                                            consultcontacto.close(dialog);
                                        }, 1500);
                                    });
                                },
                                error: consultcontacto.error
                            });
                        });
                    });
                }
                else {
                    if ($('#contact-container .contact-message:visible').length > 0) {
                        var msg = $('#contact-container .contact-message div');
                        msg.fadeOut(200, function () {
                            msg.empty();
                            consultcontacto.showError();
                            msg.fadeIn(200);
                        });
                    }
                    else {
                        $('#contact-container .contact-message').animate({
                            height: '30px'
                        }, consultcontacto.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()) {
                consultcontacto.message += 'Name is required. ';
            }

            var email = $('#contact-container #contact-email').val();
            if (!email) {
                consultcontacto.message += 'Email is required. ';
            }
            else {
                if (!contact.validateEmail(email)) {
                    consultcontacto.message += 'Email is invalid. ';
                }
            }

            if (!$('#contact-container #contact-message').val()) {
                consultcontacto.message += 'Message is required.';
            }

            if (consultcontacto.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(consultcontacto.message))
                .fadeIn(200);
        }
    };

    consultcontacto.init();

});

HTML

<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>
                        </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>&nbsp;</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>&nbsp;</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>

    </body>
</html>

CSS

#Soluciones_derecho2 {
    float: left;
    position: relative;
    /*background-color: Purple;*/
    width: 230px;
    /*height: 536px;*/
}
#Soluciones_derecho2 .contactanos {
    width: 230px;
    height: 219px;
    background-color: olive;
}

#contact-button {
    height: 40px;
    width: 220px;
    float: left;
    position:relative;
    margin: 7px 0 0 5px;
}


a.consultcontacto { 
    height: 40px; 
    width: 220px;
    background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
}

a.consultcontacto:hover { 
    /*background-position:left top; /*0px 0px;*/
}

/* contact.css */
/*
 * SimpleModal Contact Form
 * http://www.ericmmartin.com/projects/simplemodal/
 * http://code.google.com/p/simplemodal/
 *
 * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Revision: $Id: contact.css 254 2010-07-23 05:14:44Z emartin24 $
 */

#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;
}