Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 30th, 2012  |  syntax: None  |  size: 20.36 KB  |  hits: 11  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Issue Implementing Several Seperate Contact Modals
  2. <div id="Soluciones_derecho2">
  3.     <div class="contactanos">
  4.         <div id="contact-button">
  5.             <div id='contact-form'>
  6.                 <a class="consultcontacto" href="#"></a>
  7.                 <a class="suportecontacto" href="#"></a>
  8.             </div>
  9.         </div>
  10.     </div>
  11. </div
  12.        
  13. #contact-button {
  14. height: 40px;
  15. width: 220px;
  16. float: left;
  17. position:relative;
  18. margin: 7px 0 0 5px;
  19. }
  20.  
  21. a.consultcontacto {
  22. height: 40px;
  23. width: 220px;
  24. background-image: url("/images/Home/consultbuton3.png");
  25. background-position:left bottom; /* 0px -27px; */
  26. display: block;
  27. font-size: 11px;
  28. text-align: center;
  29. }
  30.  
  31. a.consultcontacto:hover {
  32. /*background-position:left top; /*0px 0px;*/
  33. }
  34.  
  35. a.suportecontacto {
  36. height: 40px;
  37. width: 220px;
  38. margin: 6px 0 0 0;
  39. background-image: url("/images/Home/soportebuton2.png");
  40. background-position:left bottom; /* 0px -27px; */
  41. display: block;
  42. font-size: 11px;
  43. text-align: center;    
  44. }
  45.  
  46. a.suportecontact:hover {
  47. }
  48.        
  49. jQuery(function ($) {
  50. var contact = {
  51.     message: null,
  52.     init: function () {
  53.         $('#contact-form input.consultcontacto, a.consultcontacto').click(function (e) {
  54.             e.preventDefault();
  55.             // Create the Modal dialog with the data
  56.  
  57.             $('#modal-contact-form').modal({
  58.                 closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
  59.                 maxHeight: 62,
  60.                 maxWidth: 62,
  61.                 minHeight: 62,
  62.                 minWidth: 62,
  63.                 position: [138, 383],
  64.                 overlayId: 'contact-overlay',
  65.                 containerId: 'contact-container',
  66.                 onOpen: contact.open,
  67.                 onShow: contact.show,
  68.                 onClose: contact.close
  69.             });
  70.         });
  71.     },
  72.        
  73. a.consultcontacto { /*Removed :hover*/
  74.     height: 40px;
  75.     width: 220px;
  76.     background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png");
  77.     background-position:left bottom; /* 0px -27px; */
  78.     display: block;
  79.     font-size: 11px;
  80.     text-align: center;
  81. }
  82.        
  83. jQuery(function ($) {
  84.     var consultcontacto = {
  85.         message: null,
  86.         init: function () {
  87.             //$('#contact-form input.contact, a.contact').click(function (e) {
  88.             $('#contact-form .consultcontacto').click(function (e) {
  89.                 e.preventDefault();
  90.  
  91.                 // Create the Modal dialog with the data
  92.  
  93.                 $('#modal-contact-form').modal({
  94.                     closeHTML: "<a href='#' title='Close' class='modal-close'>Cierra Ticket Modal</a>",
  95.                     maxHeight: 62,
  96.                     maxWidth: 62,
  97.                     minHeight: 62,
  98.                     minWidth: 62,
  99.                     position: [50, 50],
  100.                     overlayId: 'contact-overlay',
  101.                     containerId: 'contact-container',
  102.                     onOpen: consultcontacto.open,
  103.                     onShow: consultcontacto.show,
  104.                     onClose: consultcontacto.close
  105.                 });
  106.             });
  107.         },
  108.         open: function (dialog) {
  109.             // add padding to the buttons in firefox/mozilla
  110.             if ($.browser.mozilla) {
  111.                 $('#contact-container .contact-button').css({
  112.                     'padding-bottom': '2px'
  113.                 });
  114.             }
  115.             // input field font size
  116.             if ($.browser.safari) {
  117.                 $('#contact-container .contact-input').css({
  118.                     'font-size': '.9em'
  119.                 });
  120.             }
  121.  
  122.             // Dynamically determine Modal Height
  123.  
  124.             //var h = 280;
  125.             var h = 220;
  126.             if ($('#contact-subject').length) {
  127.                 h += 26;
  128.             }
  129.             if ($('#contact-cc').length) {
  130.                 h += 22;
  131.             }
  132.  
  133.             var title = $('#contact-container .contact-title').html();
  134.             $('#contact-container .contact-title').html('Cargando...');
  135.             dialog.overlay.fadeIn(200, function () {
  136.                 dialog.container.fadeIn(200, function () {
  137.                     dialog.data.fadeIn(200, function () {
  138.                         $('#contact-container .contact-content').animate({
  139.                             height: h
  140.                         }, function () {
  141.                             $('#contact-container .contact-title').html(title);
  142.                             $('#contact-container form').fadeIn(200, function () {
  143.                                 $('#contact-container #contact-name').focus();
  144.  
  145.                                 $('#contact-container .contact-cc').click(function () {
  146.                                     var cc = $('#contact-container #contact-cc');
  147.                                     cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
  148.                                 });
  149.  
  150.                                 // fix png's for IE 6
  151.                                 if ($.browser.msie && $.browser.version < 7) {
  152.                                     $('#contact-container .contact-button').each(function () {
  153.                                         if ($(this).css('backgroundImage').match(/^url[("']+(.*.png)[)"']+$/i)) {
  154.                                             var src = RegExp.$1;
  155.                                             $(this).css({
  156.                                                 backgroundImage: 'none',
  157.                                                 filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
  158.                                             });
  159.                                         }
  160.                                     });
  161.                                 }
  162.                             });
  163.                         });
  164.                     });
  165.                 });
  166.             });
  167.         },
  168.         show: function (dialog) {
  169.             $('#contact-container .contact-send').click(function (e) {
  170.                 e.preventDefault();
  171.  
  172.                 var form = $('#contact-container form');
  173.  
  174.                 // validate form
  175.                 if (consultcontacto.validate()) {
  176.                     var msg = $('#contact-container .contact-message');
  177.                     msg.fadeOut(function () {
  178.                         msg.removeClass('contact-error').empty();
  179.                     });
  180.                     $('#contact-container .contact-title').html('Enviando...');
  181.                     $('#contact-container form').fadeOut(200);
  182.                     $('#contact-container .contact-content').animate({
  183.                         height: '80px'
  184.                     }, function () {
  185.                         $('#contact-container .contact-loading').fadeIn(200, function () {
  186.                             $.ajax({
  187.                                 url: form[0].action,
  188.                                 data: $('#contact-container form').serialize() + '&action=send',
  189.                                 type: 'post',
  190.                                 cache: false,
  191.                                 dataType: 'html',
  192.                                 success: function (data) {
  193.  
  194.                                     $('#contact-container .contact-loading').fadeOut(200, function () {
  195.                                         $('#contact-container .contact-title').html('Gracias!');
  196.                                         msg.html(data).fadeIn(200);
  197.                                         setTimeout(function () {
  198.                                             consultcontacto.close(dialog);
  199.                                         }, 1500);
  200.                                     });
  201.                                 },
  202.                                 error: consultcontacto.error
  203.                             });
  204.                         });
  205.                     });
  206.                 }
  207.                 else {
  208.                     if ($('#contact-container .contact-message:visible').length > 0) {
  209.                         var msg = $('#contact-container .contact-message div');
  210.                         msg.fadeOut(200, function () {
  211.                             msg.empty();
  212.                             consultcontacto.showError();
  213.                             msg.fadeIn(200);
  214.                         });
  215.                     }
  216.                     else {
  217.                         $('#contact-container .contact-message').animate({
  218.                             height: '30px'
  219.                         }, consultcontacto.showError);
  220.                     }
  221.  
  222.                 }
  223.             });
  224.         },
  225.         close: function (dialog) {
  226.             $('#contact-container .contact-message').fadeOut();
  227.             $('#contact-container .contact-title').html('Cerrando...');
  228.             $('#contact-container form').fadeOut(200);
  229.             $('#contact-container .contact-content').animate({
  230.                 height: 40
  231.             }, function () {
  232.                 dialog.data.fadeOut(200, function () {
  233.                     dialog.container.fadeOut(200, function () {
  234.                         dialog.overlay.fadeOut(200, function () {
  235.                             $.modal.close();
  236.                         });
  237.                     });
  238.                 });
  239.             });
  240.         },
  241.         error: function (xhr) {
  242.             alert(xhr.statusText);
  243.         },
  244.         validate: function () {
  245.             contact.message = '';
  246.             if (!$('#contact-container #contact-name').val()) {
  247.                 consultcontacto.message += 'Name is required. ';
  248.             }
  249.  
  250.             var email = $('#contact-container #contact-email').val();
  251.             if (!email) {
  252.                 consultcontacto.message += 'Email is required. ';
  253.             }
  254.             else {
  255.                 if (!contact.validateEmail(email)) {
  256.                     consultcontacto.message += 'Email is invalid. ';
  257.                 }
  258.             }
  259.  
  260.             if (!$('#contact-container #contact-message').val()) {
  261.                 consultcontacto.message += 'Message is required.';
  262.             }
  263.  
  264.             if (consultcontacto.message.length > 0) {
  265.                 return false;
  266.             }
  267.             else {
  268.                 return true;
  269.             }
  270.         },
  271.         validateEmail: function (email) {
  272.             var at = email.lastIndexOf("@");
  273.  
  274.             // Make sure the at (@) sybmol exists and  
  275.             // it is not the first or last character
  276.             if (at < 1 || (at + 1) === email.length)
  277.                 return false;
  278.  
  279.             // Make sure there aren't multiple periods together
  280.             if (/(.{2,})/.test(email))
  281.                 return false;
  282.  
  283.             // Break up the local and domain portions
  284.             var local = email.substring(0, at);
  285.             var domain = email.substring(at + 1);
  286.  
  287.             // Check lengths
  288.             if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
  289.                 return false;
  290.  
  291.             // Make sure local and domain don't start with or end with a period
  292.             if (/(^.|.$)/.test(local) || /(^.|.$)/.test(domain))
  293.                 return false;
  294.  
  295.             // Check for quoted-string addresses
  296.             // Since almost anything is allowed in a quoted-string address,
  297.             // we're just going to let them go through
  298.             if (!/^"(.+)"$/.test(local)) {
  299.                 // It's a dot-string address...check for valid characters
  300.                 if (!/^[-a-zA-Z0-9!#$%*/?|^{}`~&'+=_.]*$/.test(local))
  301.                     return false;
  302.             }
  303.  
  304.             // Make sure domain contains only valid characters and at least one period
  305.             if (!/^[-a-zA-Z0-9.]*$/.test(domain) || domain.indexOf(".") === -1)
  306.                 return false;
  307.  
  308.             return true;
  309.         },
  310.         showError: function () {
  311.             $('#contact-container .contact-message')
  312.                 .html($('<div class="contact-error"></div>').append(consultcontacto.message))
  313.                 .fadeIn(200);
  314.         }
  315.     };
  316.  
  317.     consultcontacto.init();
  318.  
  319. });
  320.        
  321. <html>
  322.     <head></head>
  323.     <body>
  324.         <form>
  325.             <div id="Soluciones_derecho2">
  326.                 <div class="contactanos">
  327.                     <div id="contact-button">
  328.                         <div id='contact-form'>
  329.  
  330.                         <a class="consultcontacto" href="#"></a>
  331.                         </div>
  332.                     </div>
  333.                 </div>
  334.             </div>
  335.         </form>
  336.  
  337. <div id='modal-contact-form' style='display: none'>
  338.     <div class='contact-top'>
  339.     </div>
  340.     <div class='contact-content'>
  341.         <h1 class='contact-title'>Crea Su Nuevo Ticket:</h1>
  342.         <div class='contact-loading' style='display: none'>
  343.         </div>
  344.         <div class='contact-message' style='display: none'>
  345.         </div>
  346.         <form action='ModalContact1.aspx' style='display: none'>
  347.             <label for='contact-name'>
  348.                 *Name:</label>
  349.             <input type='text' id='contact-name' class='contact-input' name='name' tabindex='1001' />
  350.             <label for='contact-email'>
  351.                 *Email:</label>
  352.             <input type='text' id='contact-email' class='contact-input' name='email' tabindex='1002' />
  353.             <label for='contact-subject'>
  354.                 Subject:</label>
  355.             <input type='text' id='contact-subject' class='contact-input' name='subject' value=''
  356.                 tabindex='1003' />
  357.             <label for='contact-message'>
  358.                 *Message:</label>
  359.             <textarea id='contact-message' class='contact-input' name='message' cols='40' rows='4'
  360.                 tabindex='1004'></textarea>
  361.             <br />
  362.             <label>&nbsp;</label>
  363.             <input type='checkbox' id='contact-cc' name='cc' value='1' tabindex='1005' />
  364.             <%--<span class='contact-cc'>Send me a copy</span>--%>
  365.  
  366.             <br style="clear:both; line-height:0px;" />
  367.             <label>&nbsp;</label>
  368.             <button type='submit' class='contact-send contact-button' tabindex='1006'>
  369.                 Enviar</button>
  370.             <button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>
  371.                 Cancelar</button>
  372.             <br />
  373.             <input type="hidden" id="tokenValue" name="tokenValue" value="<%= new MailService().GetToken(0) %>" />
  374.         </form>
  375.     </div>
  376.     <div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
  377. </div>
  378.  
  379.     </body>
  380. </html>
  381.        
  382. #Soluciones_derecho2 {
  383.     float: left;
  384.     position: relative;
  385.     /*background-color: Purple;*/
  386.     width: 230px;
  387.     /*height: 536px;*/
  388. }
  389. #Soluciones_derecho2 .contactanos {
  390.     width: 230px;
  391.     height: 219px;
  392.     background-color: olive;
  393. }
  394.  
  395. #contact-button {
  396.     height: 40px;
  397.     width: 220px;
  398.     float: left;
  399.     position:relative;
  400.     margin: 7px 0 0 5px;
  401. }
  402.  
  403.  
  404. a.consultcontacto {
  405.     height: 40px;
  406.     width: 220px;
  407.     background-image: url("http://www.virtualpetstore.com/Images/Home/consultbuton3.png");
  408.     background-position:left bottom; /* 0px -27px; */
  409.     display: block;
  410.     font-size: 11px;
  411.     text-align: center;
  412. }
  413.  
  414. a.consultcontacto:hover {
  415.     /*background-position:left top; /*0px 0px;*/
  416. }
  417.  
  418. /* contact.css */
  419. /*
  420.  * SimpleModal Contact Form
  421.  * http://www.ericmmartin.com/projects/simplemodal/
  422.  * http://code.google.com/p/simplemodal/
  423.  *
  424.  * Copyright (c) 2010 Eric Martin - http://ericmmartin.com
  425.  *
  426.  * Licensed under the MIT license:
  427.  *   http://www.opensource.org/licenses/mit-license.php
  428.  *
  429.  * Revision: $Id: contact.css 254 2010-07-23 05:14:44Z emartin24 $
  430.  */
  431.  
  432. #contact-overlay {                          /* Overlay */
  433.     background-color:#000;
  434.     /*background-color: Green;*/
  435.     cursor:wait;
  436. }
  437.  
  438. #contact-container {                        /* contact-container is the containerId defined in contact.js */
  439.     font-family: Arial;
  440.     font-size: 12px;
  441.     line-height: 18px;                      /* Height of space above and below all Text ie Labels */
  442.     text-align:left;
  443.     /*width:425px;*/                        /* Modal Width */ /* Modal Height within contact.js */
  444.     width: 350px;
  445. }
  446. #contact-container .contact-content {       /* contact-content is the class defined within class modal-contact-form within Site1.Master */
  447.     background-color: yellow;
  448.     /*background-color: #8C8C8C;*/
  449.     color:#666666;
  450.     height: 40px;                           /* height from point where modal rolls down */
  451. }
  452. #contact-container form {
  453.     margin: 0 0 0 0;                        /* margin of form controls */
  454.     padding: 0 0 0 0;
  455.     background-color: red;
  456. }
  457. #contact-container h1 {                     /* Text for Create Ticket & Goodbye */
  458.     /*color: #666666;*/
  459.     color: Black;                        
  460.     font-size: 13px;
  461.     line-height: 13px;                      /* Height of space above and below Text and overall */
  462.     margin: 0 0 0 0;                        /* Margin of container itself */
  463.     padding: 0 0 2px 68px;                  /* Padding for Text above and below Create Ticket & Goodbye */
  464.     text-align:left;
  465.     background-color: Green;
  466. }
  467. #contact-container label {
  468.     clear: left;
  469.     float: left;
  470.     display: block;
  471.     font-weight: bold;
  472.     padding: 0 4px 0 0;                     /* padding between Labels and Textboxes */
  473.     margin: 0 0 2px 0;              
  474.     text-align: right;
  475.     width: 62px;                            /* width of Labels */
  476.     background-color: Lime;
  477. }
  478. #contact-container .contact-input {
  479.     background: #eee;
  480.     border: 1px solid #fff;
  481.     font-family: Arial;
  482.     float: left;
  483.     padding: 0 0 0 0;
  484.     margin: 0 0 2px 0;
  485.     /*width:300px;*/                        /* width of textboxes */
  486.     width: 250px;
  487. }
  488. #contact-container textarea {
  489.     /*height:114px;*/                       /* height of textarea */
  490.     height:108px;
  491. }
  492. #contact-container br {
  493.     clear:both;
  494. }
  495. #contact-container .contact-loading {
  496.     background:url(../Images/Contact/loading.gif) no-repeat;
  497.     height:55px;
  498.     margin:-14px 0 0 190px;
  499.     padding:0;
  500.     position:absolute;
  501.     width:54px;
  502.     z-index:8000;
  503. }
  504. #contact-container .contact-message {
  505.     text-align:center;
  506. }
  507. #contact-container .contact-error {
  508.     background:#000;
  509.     border:2px solid #ccc;
  510.     font-size:12px;
  511.     font-weight:bold;
  512.     line-height:18px;
  513.     margin:0 auto;
  514.     padding:2px;
  515.     width:92%;
  516. }
  517. #contact-container .contact-cc {
  518.     cursor:default;
  519.     font-size: 12px;
  520.     vertical-align:top;
  521.     background-color: Fuchsia;
  522.     margin: 0 0 0 0;
  523. }
  524. #contact-container .contact-button {
  525.     /*background: #d76300;*/                    /* Color of Button */
  526.     background: black;
  527.     border: 0;
  528.     color: #fff;                                /* Color of Button Text */
  529.     cursor: pointer;
  530.     font-size: 12px;
  531.     font-weight: bold;
  532.     height: 19px;                               /* Height of Button */
  533.     width: 58px;
  534.     margin: 0 0 2px 0;  
  535.     text-align: center;
  536.     vertical-align: middle;
  537.     -webkit-border-radius: 8px;
  538.     -moz-border-radius: 8px;
  539.     /*border-radius:8px;*/
  540. }
  541. #contact-container .contact-button:hover {
  542.     background:#f49000;
  543. }
  544.  
  545. #contact-container a.modal-close {              /* modal-close is defined in contact.js */
  546.     color: gray;
  547.     font-family: Arial;                         /* Text for Cierra Ticket */
  548.     font-size: 11px;                        
  549.     font-weight: bold;
  550.     position: absolute;
  551.     text-decoration: none;
  552.     right: 8px;
  553.     top: -2px;
  554. }
  555. #contact-container a.modal-close:link {
  556.     color: gray;
  557.     text-decoration: none;
  558. }
  559. #contact-container a.modal-close:visited {
  560.     color: #999;
  561.     text-decoration: none;
  562. }
  563. #contact-container a.modal-close:hover {
  564.     color: gray;
  565.     text-decoration: underline;
  566. }
  567. #contact-container a.modal-close:active {
  568.     color: #999;
  569.     text-decoration: none;
  570. }
  571.  
  572.  
  573. #contact-container .contact-top {
  574.     /*background-color:#333;*/
  575.     background-color:orange;
  576.     height:13px;
  577.     margin:0;
  578.     padding:0;
  579.     -webkit-border-top-left-radius:4px;
  580.     -webkit-border-top-right-radius:4px;
  581.     -moz-border-radius-topleft:4px;
  582.     -moz-border-radius-topright:4px;
  583.     /*border-radius: 8px 8px 0 0; */
  584. }
  585. #contact-container .contact-bottom {
  586.     /*background-color:#333;*/
  587.     background-color: Purple;
  588.     font-size:10px;
  589.     height:13px;
  590.     line-height:12px;
  591.     text-align:center;
  592.     -webkit-border-bottom-right-radius:8px;
  593.     -webkit-border-bottom-left-radius:8px;
  594.     -moz-border-radius-bottomright:8px;
  595.     -moz-border-radius-bottomleft:8px;
  596.     /*border-radius:0 0 8px 8px;*/
  597. }
  598. #contact-container .contact-bottom a,
  599. #contact-container .contact-bottom a:link,
  600. #contact-container .contact-bottom a:active,
  601. #contact-container .contact-bottom a:visited
  602. {
  603.     color:#666;
  604.     position:relative;
  605.     top:-4px;
  606.     text-decoration:none;
  607. }
  608. #contact-container .contact-bottom a:hover {
  609.     color:#888;
  610. }
create a new version of this paste RAW Paste Data