JQuery & CSS Contact Modal Plugin Height & Width problem

2023-02-09 20:23 问答作者：

I finally got the JQuery Contact Plugin to function,however the minHeight or minWidth or maxHeight or maxWidth does work in the contact.js function, according to the documentation.

Could somebody jsfiddle.net this??

The live Demo "Contact Form" Modal: http://www.ericmmartin.com/projects/simplemodal-demos/

Alex helped me find out how to change the Height & Width via the contact.js however its not doing anything. I could only change the Width directly in the Contact.css.

There are 2 CSS files and 2 js files that I will paste here.

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 $
*/

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

/* Container */
#contact-container 
{
font: 15px/22px 'Trebuchet MS', Verdana, Arial; 
text-align:left; 
/*width:450px;*/             /* modal width */
width: 382px;
}
#contact-container .contact-content 
{
/*background-color:#333;*/
background-color: Red;
color:#ddd;
height:40px;                 /* height from point where modal rolls down */
}
#contact-container h1 
{
color:#d76300;               /* Send us a Message and Goodbye */
/*font-size:20px; */
font-size:18px;
line-height:20px; 
margin:0; 
/*padding:0 0 6px 12px;*/
padding:0 0 6px 100px;       /* padding for Send us a Message and Goodbye */
text-align:left;
}
#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:14px; 
font-weight:bold; 
line-height:18px; 
margin:0 auto; 
padding:2px; 
width:92%;
}
#contact-container br 
{
clear:both;
}
#contact-container form         
{
/*margin:0; padding:0;*/     /* margin of form */
margin: 3px 0 0 0;
}
#contact-container label 
{
clear:left; 
display:block; 
float:left; 
font-weight:bold; 
padding-right:15px;          /* padding between labels and textboxes */
text-align:right; 
/*width:100px*/              /* width of labels */
width:85px;
}
#contact-container .contact-input 
{
background:#eee; 
border:1px solid #fff; 
font-family:'Trebuchet MS', Verdana, Arial; 
float:left; 
padding:2px; 
margin:2px; 
/*width:300px;*/             /* width of textboxes */
width:250px;
}
#contact-container textarea      
{
/*height:114px;*/            /* height of textarea */
height:108px;
}
#contact-container .contact-cc 
{
cursor:default; 
font-size:14px; 
vertical-align:top;
}
#contact-container .contact-top 
{
/*background-color:#333;*/
background-color:orange;
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:#333; 
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;
}
#contact-container .contact-button 
{
background:#d76300; 
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:#f49000;
}
#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;
}

demo.css --

body 
{
background:#fff; 
color:green; 
font: 12px/22px verdana, arial, sans-serif; 
height:100%; margin:0 auto; 
width:100%;
} 
h1 
{
color:#3a6d8c; 
font-size:34px; 
line-height:40px; 
margin:0;
}
h3 
{
color:#3a6d8c; 
font-size:22px; 
line-height:26px; 
font-weight:normal; 
margin:0 0 8px 0;
}
img 
{
border:0;
}
#logo 
{
margin-bottom:20px; 
width:300px;
}
#logo h1 
{
color:#666; 
letter-spacing:-1px; 
font-weight:normal;
}
#logo h1 span 
{
color:#444; 
font-weight:bold;
}
#logo .title 
{
color:#999; 
font-size:12px;
}
#container 
{
margin:0 auto; 
padding-top:20px; 
width:800px;
}
#content 
{
border-bottom:1px dotted #999;   
border-top:1px dotted #999; 
padding:20px 0;                   /*top padding for text 'Contact Form' */
}
#footer 
{
clear:left; 
color:#888; 
margin:20px 0;
}
#footer a:link, #footer a:visited 
{
color:#888; 
text-decoration:none;
}
#footer a:hover 
{
color:#333; 
text-decoration:underline;
}

HTML --

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJQueryModal._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- 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' />
<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>
</head>
<body>
<div id='container'>
<div id='logo'>
    <h1>Simple<span>Modal</span></h1>
    <span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
    <div id='contact-form'>  <!--important-->
        <h3>Contact Form</h3>
        <p>A contact form built on SimpleModal. Demonstrates the use of the <code>onOpen</code>, <code>onShow</code> and <code>onClose</code> callbacks, as well as the use of Ajax with SimpleModal.</p>
        <p>To use: open <code>data/contact.php</code> and modify the <code>$to</code> and <code>$subject</code> values. To enable/disable information about the user, configure the <code>$extra</code> array.</p>
        <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='images/contact/loading.gif' alt='' />
    </div>
</div>
<div id='footer'>
    &copy; 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
<div id='modal-contact-form' style='display:none'>
<div class='contact-top'></div>
<div class='contact-content'>
    <h1 class='contact-title'>Send us a message:</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'>*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/>
        <label>&nbsp;</label>
        <button type='submit' class='contact-send contact-button' tabindex='1006'>Send</button>
        <button type='submit' class='contact-cancel contact-button simplemodal-close' tabindex='1007'>Cancel</button>
        <br/>
    </form>
</div>
<div class='contact-bottom'><a href='http://www.ericmmartin.com/projects/simplemodal/'>Powered by SimpleModal</a></div>
</div>
</body>
</html>

contact.js --

/*
* 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.js 254 2010-07-23 05:14:44Z emartin24 $
*/

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

            // create a modal dialog with the data
            $('#modal-contact-form').modal({
                closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
                maxHeight: 150,
                maxWidth: 150,
                minHeight: 150,
                minWidth: 150,
                position: [10, 10],
                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 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('Loading...');
        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('Sending...');
                $('#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('Thank you!');
                                    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('Goodbye...');
        $('#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();

});

jquery.simplemodal.js --

/*
 * SimpleModal 1.4.1 - jQuery Plugin
* http://www.ericmmartin.com/projects/simplemodal/
* Copyright (c) 2010 Eric Martin (http://twitter.com/ericmmartin)
* Dual licensed under the MIT and GPL licenses
* Revision: $Id: jquery.simplemodal.js 261 2010-11-05 21:16:20Z emartin24 $
*/
(function(d){var k=d.browser.msie&&parseInt(d.browser.version)===6&&typeof window.XMLHttpRequest!=="object",m=d.browser.msie&&parseInt(d.browser.version)===7,l=null,f=[];d.modal=function(a,b){return d.modal.impl.init(a,b)};d.modal.close=function(){d.modal.impl.close()};d.modal.focus=function(a){d.modal.impl.focus(a)};d.modal.setContainerDimensions=function(){d.modal.impl.setContainerDimensions()};d.modal.setPosition=function(){d.modal.imp开发者_JAVA技巧l.setPosition()};d.modal.update=function(a,b){d.modal.impl.update(a,
b)};d.fn.modal=function(a){return d.modal.impl.init(this,a)};d.modal.defaults={appendTo:"body",focus:true,opacity:50,overlayId:"simplemodal-overlay",overlayCss:{},containerId:"simplemodal-container",containerCss:{},dataId:"simplemodal-data",dataCss:{},minHeight:null,minWidth:null,maxHeight:null,maxWidth:null,autoResize:false,autoPosition:true,zIndex:1E3,close:true,closeHTML:'<a class="modalCloseImg" title="Close"></a>',closeClass:"simplemodal-close",escClose:true,overlayClose:false,position:null,
persist:false,modal:true,onOpen:null,onShow:null,onClose:null};d.modal.impl={d:{},init:function(a,b){var c=this;if(c.d.data)return false;l=d.browser.msie&&!d.boxModel;c.o=d.extend({},d.modal.defaults,b);c.zIndex=c.o.zIndex;c.occb=false;if(typeof a==="object"){a=a instanceof jQuery?a:d(a);c.d.placeholder=false;if(a.parent().parent().size()>0){a.before(d("<span></span>").attr("id","simplemodal-placeholder").css({display:"none"}));c.d.placeholder=true;c.display=a.css("display");if(!c.o.persist)c.d.orig=
a.clone(true)}}else if(typeof a==="string"||typeof a==="number")a=d("<div></div>").html(a);else{alert("SimpleModal Error: Unsupported data type: "+typeof a);return c}c.create(a);c.open();d.isFunction(c.o.onShow)&&c.o.onShow.apply(c,[c.d]);return c},create:function(a){var b=this;f=b.getDimensions();if(b.o.modal&&k)b.d.iframe=d('<iframe src="javascript:false;"></iframe>').css(d.extend(b.o.iframeCss,{display:"none",opacity:0,position:"fixed",height:f[0],width:f[1],zIndex:b.o.zIndex,top:0,left:0})).appendTo(b.o.appendTo);
b.d.overlay=d("<div></div>").attr("id",b.o.overlayId).addClass("simplemodal-overlay").css(d.extend(b.o.overlayCss,{display:"none",opacity:b.o.opacity/100,height:b.o.modal?f[0]:0,width:b.o.modal?f[1]:0,position:"fixed",left:0,top:0,zIndex:b.o.zIndex+1})).appendTo(b.o.appendTo);b.d.container=d("<div></div>").attr("id",b.o.containerId).addClass("simplemodal-container").css(d.extend(b.o.containerCss,{display:"none",position:"fixed",zIndex:b.o.zIndex+2})).append(b.o.close&&b.o.closeHTML?d(b.o.closeHTML).addClass(b.o.closeClass):
"").appendTo(b.o.appendTo);b.d.wrap=d("<div></div>").attr("tabIndex",-1).addClass("simplemodal-wrap").css({height:"100%",outline:0,width:"100%"}).appendTo(b.d.container);b.d.data=a.attr("id",a.attr("id")||b.o.dataId).addClass("simplemodal-data").css(d.extend(b.o.dataCss,{display:"none"})).appendTo("body");b.setContainerDimensions();b.d.data.appendTo(b.d.wrap);if(k||l)b.fixIE()},bindEvents:function(){var a=this;d("."+a.o.closeClass).bind("click.simplemodal",function(b){b.preventDefault();a.close()});
a.o.modal&&a.o.close&&a.o.overlayClose&&a.d.overlay.bind("click.simplemodal",function(b){b.preventDefault();a.close()});d(document).bind("keydown.simplemodal",function(b){if(a.o.modal&&b.keyCode===9)a.watchTab(b);else if(a.o.close&&a.o.escClose&&b.keyCode===27){b.preventDefault();a.close()}});d(window).bind("resize.simplemodal",function(){f=a.getDimensions();a.o.autoResize?a.setContainerDimensions():a.o.autoPosition&&a.setPosition();if(k||l)a.fixIE();else if(a.o.modal){a.d.iframe&&a.d.iframe.css({height:f[0],
width:f[1]});a.d.overlay.css({height:f[0],width:f[1]})}})},unbindEvents:function(){d("."+this.o.closeClass).unbind("click.simplemodal");d(document).unbind("keydown.simplemodal");d(window).unbind("resize.simplemodal");this.d.overlay.unbind("click.simplemodal")},fixIE:function(){var a=this,b=a.o.position;d.each([a.d.iframe||null,!a.o.modal?null:a.d.overlay,a.d.container],function(c,h){if(h){var g=h[0].style;g.position="absolute";if(c<2){g.removeExpression("height");g.removeExpression("width");g.setExpression("height",
'document.body.scrollHeight > document.body.clientHeight ? document.body.scrollHeight : document.body.clientHeight + "px"');g.setExpression("width",'document.body.scrollWidth > document.body.clientWidth ? document.body.scrollWidth : document.body.clientWidth + "px"')}else{var e;if(b&&b.constructor===Array){c=b[0]?typeof b[0]==="number"?b[0].toString():b[0].replace(/px/,""):h.css("top").replace(/px/,"");c=c.indexOf("%")===-1?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"';if(b[1]){e=typeof b[1]==="number"?b[1].toString():b[1].replace(/px/,"");e=e.indexOf("%")===-1?e+' + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"':parseInt(e.replace(/%/,""))+' * ((document.documentElement.clientWidth || document.body.clientWidth) / 100) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"'}}else{c=
'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (t = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"';e='(document.documentElement.clientWidth || document.body.clientWidth) / 2 - (this.offsetWidth / 2) + (t = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft) + "px"'}g.removeExpression("top");g.removeExpression("left");g.setExpression("top",
c);g.setExpression("left",e)}}})},focus:function(a){var b=this;a=a&&d.inArray(a,["first","last"])!==-1?a:"first";var c=d(":input:enabled:visible:"+a,b.d.wrap);setTimeout(function(){c.length>0?c.focus():b.d.wrap.focus()},10)},getDimensions:function(){var a=d(window);return[d.browser.opera&&d.browser.version>"9.5"&&d.fn.jquery<"1.3"||d.browser.opera&&d.browser.version<"9.5"&&d.fn.jquery>"1.2.6"?a[0].innerHeight:a.height(),a.width()]},getVal:function(a,b){return a?typeof a==="number"?a:a==="auto"?0:
a.indexOf("%")>0?parseInt(a.replace(/%/,""))/100*(b==="h"?f[0]:f[1]):parseInt(a.replace(/px/,"")):null},update:function(a,b){var c=this;if(!c.d.data)return false;c.d.origHeight=c.getVal(a,"h");c.d.origWidth=c.getVal(b,"w");c.d.data.hide();a&&c.d.container.css("height",a);b&&c.d.container.css("width",b);c.setContainerDimensions();c.d.data.show();c.o.focus&&c.focus();c.unbindEvents();c.bindEvents()},setContainerDimensions:function(){var a=this,b=k||m,c=a.d.origHeight?a.d.origHeight:d.browser.opera?
a.d.container.height():a.getVal(b?a.d.container[0].currentStyle.height:a.d.container.css("height"),"h");b=a.d.origWidth?a.d.origWidth:d.browser.opera?a.d.container.width():a.getVal(b?a.d.container[0].currentStyle.width:a.d.container.css("width"),"w");var h=a.d.data.outerHeight(true),g=a.d.data.outerWidth(true);a.d.origHeight=a.d.origHeight||c;a.d.origWidth=a.d.origWidth||b;var e=a.o.maxHeight?a.getVal(a.o.maxHeight,"h"):null,i=a.o.maxWidth?a.getVal(a.o.maxWidth,"w"):null;e=e&&e<f[0]?e:f[0];i=i&&i<
f[1]?i:f[1];var j=a.o.minHeight?a.getVal(a.o.minHeight,"h"):"auto";c=c?a.o.autoResize&&c>e?e:c<j?j:c:h?h>e?e:a.o.minHeight&&j!=="auto"&&h<j?j:h:j;e=a.o.minWidth?a.getVal(a.o.minWidth,"w"):"auto";b=b?a.o.autoResize&&b>i?i:b<e?e:b:g?g>i?i:a.o.minWidth&&e!=="auto"&&g<e?e:g:e;a.d.container.css({height:c,width:b});a.d.wrap.css({overflow:h>c||g>b?"auto":"visible"});a.o.autoPosition&&a.setPosition()},setPosition:function(){var a=this,b,c;b=f[0]/2-a.d.container.outerHeight(true)/2;c=f[1]/2-a.d.container.outerWidth(true)/
2;if(a.o.position&&Object.prototype.toString.call(a.o.position)==="[object Array]"){b=a.o.position[0]||b;c=a.o.position[1]||c}else{b=b;c=c}a.d.container.css({left:c,top:b})},watchTab:function(a){var b=this;if(d(a.target).parents(".simplemodal-container").length>0){b.inputs=d(":input:enabled:visible:first, :input:enabled:visible:last",b.d.data[0]);if(!a.shiftKey&&a.target===b.inputs[b.inputs.length-1]||a.shiftKey&&a.target===b.inputs[0]||b.inputs.length===0){a.preventDefault();b.focus(a.shiftKey?"last":
"first")}}else{a.preventDefault();b.focus()}},open:function(){var a=this;a.d.iframe&&a.d.iframe.show();if(d.isFunction(a.o.onOpen))a.o.onOpen.apply(a,[a.d]);else{a.d.overlay.show();a.d.container.show();a.d.data.show()}a.o.focus&&a.focus();a.bindEvents()},close:function(){var a=this;if(!a.d.data)return false;a.unbindEvents();if(d.isFunction(a.o.onClose)&&!a.occb){a.occb=true;a.o.onClose.apply(a,[a.d])}else{if(a.d.placeholder){var b=d("#simplemodal-placeholder");if(a.o.persist)b.replaceWith(a.d.data.removeClass("simplemodal-data").css("display",
a.display));else{a.d.data.hide().remove();b.replaceWith(a.d.orig)}}else a.d.data.hide().remove();a.d.container.hide().remove();a.d.overlay.hide();a.d.iframe&&a.d.iframe.hide().remove();setTimeout(function(){a.d.overlay.remove();a.d={}},10)}}}})(jQuery);

Css properties are defined by jquery. I just read up on the docs, You need to use containerCSS to define the styles you need. Do this.

        $('#modal-contact-form').modal({
            closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
            position: ["15%",],
            overlayId: 'contact-overlay',
            containerId: 'contact-container',
            onOpen: contact.open,
            onShow: contact.show,
            onClose: contact.close
            containerCss:{padding:0}

        });
    });
},

继续阅读：css jquery simplemodal

JQuery & CSS Contact Modal Plugin Height & Width problem

更多精彩内容

精彩评论

最新问答

央视是哪个频道？

请问买过的朋友，舒提啦旅行箱实际使用体验如何？？

检查不孕不育需要的费用？

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？