将对话框内的表格设置为主对话框

时间:2019-05-25 12:58:14

标签: javascript jquery

我一直在研究一个对话框,其中包含一个选择菜单。这必须具有某种方式并具有自定义按钮。尽管自定义按钮起作用并且该框看起来恰好正确,但是我似乎无法弄清楚如何在后台摆脱原始对话框,而只是在打开对话框时显示我的选择菜单表。

我尝试将表格从对话框中取出,但这并没有真正的帮助,因为我只需要在单击按钮时才显示它。

这是HTML的摘要,因为我的解释可能没有任何意义:

<div id='table'>
    <table id='table1' style='display:none' width='100%'>


        <div class='inputline' style='display:inline-block'>
            <label for='safety_gear_select' class='textbox'>_BEANDF_RAILS_SFGEAR.</label>
            <select id='safety_gear_select' name='safety_gear_select'>
                <option value='0'>_BEANDF_LOG_WITHOUT.</option>
                <option value='1'>_BEANDF_CAPTIVE_ROLLER_TYPE.</option>
                <option value='2'>_BEANDF_RAILS_SFGEAR_PROGRESSIVE.</option>
                <option value='3'>_BEANDF_RAILS_SFGEAR_WEDGE_TYPE.</option>
            </select>
        </div>


        <div class='inputline' style='display:inline-block'>
            <label for='pawl_device_select' class='textbox'>_BEANDF_PAWL_DEVICE.</label>
            <select id='pawl_device_select' name='pawl_device_select'>
                <option value='0'>_BEANDF_LOG_WITHOUT.</option>
                <option value='1'>_BEANDF_LOG_WITH.</option>
            </select>
        </div>


        <div class='inputline' style='display:inline-block'>
            <label for='buffer_select_select' class='textbox'>_BEANDF_COMP_PRINT_BUFFER.</label>
            <select id='buffer_select' name='buffer_select'>
                <option value='0'>_BEANDF_ENERGY_ACCUMULATION_TYPE_BUFFER.</option>
                <option value='1'>_BEANDF_ENERGY_DISSIPATION_TYPE_BUFFER.</option>
            </select>
        </div>


    </table>
</div>

这是JavaScript:

function initImpactFactorDialog() {
    $("#opener").click(function () {
        ($("#dialogBox").dialog("isOpen") == false) ? $("#dialogBox").dialog("open") : $("#dialogBox").dialog("close");
    });
    $("#dialogBox").dialog({
        autoOpen: false,
        draggable: true,
        position: [440, 118],

    });

    $("#closeBox").click(function () {
        $("#dialogBox").dialog('close');
    });

    $("#applyDialog").click(function () {
        $('input[name="safety_gear"').val($("#safety_gear_select option:selected").val());
        $('input[name="pawl_device"').val($("#pawl_device_select option:selected").val());
        $('input[name="buffer"').val($("#buffer_select option:selected").val());
        $("#dialogBox").dialog('close');
    });

    $("#cancelDialog").click(function () {
        $("#dialogBox").dialog('close');
    });

}

我希望背景中的灰色对话框消失,只显示我的自定义内容。

这里有一张图片,可以更好地了解正在发生的事情:

enter image description here

非常感谢您的帮助!

0 个答案:

没有答案