SimpleModal containerCSS在Firefox或Chrome中不起作用 [英] SimpleModal containerCSS not working in Firefox or Chrome

问题描述

我试图用containerCSS覆盖simplemodal jquery插件随附的默认样式表中的设置，该插件在IE7中工作正常，但在Firefox或Chrome中却无法正常工作.不知道这是一个错误还是我做错了.

I tried to override the settings in the default stlyesheet that comes with the simplemodal jquery plugin with containerCSS which is working fine in IE7 but not Firefox or Chrome. Not sure if this is a bug or I am doing something wrong.

jQuery代码:

$(document).ready(function() {
    $("#ButtonPopup").click(function() {
        $("#addEditTask").modal({
            onOpen: modalOpen,
            persist: true,
            containerCss: ({ width: "300", height: "200", marginLeft: "-150" })
        });
        return false;
    });
});

HTML代码:

<button id="ButtonPopup">Popup</button>
<div id="addEditTask" style="display:none;">
     <p>Aliquam nonummy adipiscing augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
     Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada
     libero, sit amet commodo magna eros quis urna.</p>
     <button id="ButtonSave">Save</button>
     <button id="ButtonCancel">Cancel</button>
</div>

请参见此 可以工作的演示和zip下载代码，您可以自己对其进行测试.

Please see this for a working demo and zip download of the code that you can test for yourself.

推荐答案

基于Gecko和WebKit的浏览器非常喜欢它们的单元.确保始终告诉它如何衡量自己的价值.

Gecko and WebKit based browsers really like their units. Make sure you always tell it how to measure your values.

另外请注意，如果要覆盖css文件中的内联样式，可以通过在值的末尾添加！important来实现.

Also as a note, if you want to override inline styles from a css file, you can do so by adding !important to the end of the value.

高度:300像素！重要；

height: 300px !important;

将覆盖内联样式.

干杯！

这篇关于SimpleModal containerCSS在Firefox或Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！