JQuery 和CSS 接触模态插件高度和高度宽度问题

Question

我终于让 JQuery 联系人插件正常工作，但是根据文档，minHeight 或 minWidth 或 maxHeight 或 maxWidth 确实可以在 contact.js 函数中工作。

有人可以 jsfiddle.net 这个吗？

现场演示“联系表单”模式：http://www.ericmmartin.com/projects/simplemodal -demos/

Alex 帮助我了解了如何更改高度和高度。通过 contact.js 获取宽度，但它没有执行任何操作。我只能直接在 Contact.css 中更改宽度。

我将在这里粘贴 2 个 CSS 文件和 2 个 js 文件。

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.impl.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);

Answer 1

CSS 属性由 jquery 定义。我刚刚阅读了文档，您需要使用 containerCSS 来定义您需要的样式。这样做。

        $('#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}

        });
    });
},