Jquery UI对话框中的复选框没有'它不会出现在Firefox 22.0和Opera中，但在Firefox

Checkbox in Jquery UI Dialog doesn't appear in Firefox 22.0 and Opera, but it does in Firefox 20.0

本文关键字：Firefox 但在 Opera 复选框 对话框 UI Jquery      更新时间：2023-09-26

我遇到了一些HTML复选框的问题

问题是：我在对话框中弹出的表单中的复选框不会出现在某些版本的Firefox和Opera中。我实际上在使用Fedora和Firefox 20.0在Safari上，三个复选框不会出现。只显示标签。在Firefox 22.0 上的其他计算机上也是如此

有人知道解决方案吗？或者我能找到一些关于这个问题的信息吗？我找了很多，但没有找到任何解决方案。

这是我的HTML代码：

<div id="addFormular" title="Create a conference" class="hidden">
    <form id="postform" action="." method="post">
    <div id="checkOption">
        <div class="optionDiv">
            <input class="addBox" type="checkbox" id="checkHD" /><label class="addOption" for="checkHD"><?php echo Lang::getFromKey("HD"); ?></label>
        </div>
        <div class="optionDiv">
            <input class="addBox" type="checkbox" id="checkRecord" /><label class="addOption" for="checkRecord"><?php echo Lang::getFromKey("Record"); ?></label>
        </div>
        <div class="optionDiv">
            <input class="addBox" type="checkbox" id="checkTeacup" /><label class="addOption" for="checkTeacup"><?php echo Lang::getFromKey("Add a tea cup"); ?></label>
        </div>
    </div>
    </form>
</div>

这是我的Javascript：

var popUpConf = $('#addFormular').dialog({
            resizable: false,
            draggable: false,
            position: {my: "left top", at: "right bottom", of: "window"},
            dialogClass: 'no-close',
            modal: true,
            width: 'auto',
            closeOnEscape: false,
            open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); },
            buttons: [
            {   
                text: "Annuler",
                click: function() {
                    $(this).dialog("close");
                }
            },
            {
                text: "Valider",
                click: function() {
                    $(this).dialog("close");
                }
            }]
        });
    }

以及所需的CSS:

.postForm {
width: 100%;
display: block;
} 
.addOption{
vertical-align: top;
}
.addBox{
margin-top: 1.5px;
}
.optionDiv{
margin-top: 5px
}

Thx！

编辑：

http://jsfiddle.net/U3pCw/这个演示只使用了我的HTML，在我的Firefox 20.0上显示了复选框，但在opera和Firefox 22.0上没有显示复选框…我真的无法获得它。

我刚刚用最新的Chrome测试了你的小提琴——尽管发生了同样的事情，我还是注意到了消失的滞后。

正在检查似乎被AdBlock插件阻止的类"addBox"。我的Chrome浏览器AddBlockPlus也发现并隐藏了它。

将类更改为其他类解决了问题，你也应该这样做。

位置有问题

我检查小提琴

jquery

var popUpConf = $('#addFormular').dialog({
    resizable: false,
    draggable: false,
    dialogClass: 'no-close',
    modal: true,
   position:  { my: "left top", at: "right bottom", of: window },
    width: 'auto',
    closeOnEscape: false,
    open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); },
    buttons: [
    {   
        text: "Annuler",
        click: function() {
            $(this).dialog("close");
        }
    },
    {
        text: "Valider",
        click: function() {
            $(this).dialog("close");
        }
    }]
});

添加jquery ui和jquery库。

相关文章：