javascript - 只有一个我的 jQuery 对话框显示。我如何让它们全部显示出来？

Question

我创建了 4 个 jQuery 对话框，如下所示:

    <div id="addCustomer" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>
    <a href="#" id="close">Close</a>
</div>
<div id="editCustomer" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>
    <a href="#" id="editClose">Close</a>
</div>
<div id="deleteCustomer" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 
    <a href="#" id="addDeviceClose">Close</a>
</div> 

而且我已经将它们设置为在页面开始时隐藏起来，如下所示:

$("#addCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#deleteCustomer").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#addDevice").dialog({
        autoOpen: false,
        draggable: true
    });
    $("#editCustomer").dialog({
        autoOpen: false,
        draggable: true
    });

现在我正尝试从上下文菜单上的一个选项中调用每个选项，如下所示，但是当我尝试时，我选择打开的第一个对话框可以正常打开，但是一旦关闭，就不会打开任何对话框再次出现在页面上。

if (e.item.name == "itmAddCustomer") {
        $(function() {
            $("#addCustomer").dialog("open");            
        });            
    }

我在这里只展示了一个菜单按钮的例子，但你明白了要点。

谁能告诉我如何解决这个问题？

干杯

更新:这是与以下答案相关的上下文菜单的代码:

<div id="popupMenu" style="z-index:19998;display:none;">
        <div class="dxm-popupMain dxm-shadow dxm-popup">
            <ul class="dx dxm-noImages dxm-gutter">
                <li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Expand
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Enable
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Edit Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Delete Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Device
                </div><b class="dx-clear"></b></li>
            </ul>
        </div>
    </div>
</div>

Answer 1

这里有一些可以满足您的需求。 SqlFiddle

它们是一些约定(可能会被删除，它只会使代码更短):

每个对话框 div 都有一个 .dialog 类(所以当 select 值改变时所有对话框都关闭)

选择的每个选项值 = item + 相应的对话框 div 的 id。

我用了一个 select ，不知道你的是什么

option on a context menu

HTML 部分:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<select id ="actionChooser">
    <option value ="">-choisir-</option>
    <option value="itemaddCustomer">Add</option>
    <option value="itemeditCustomer">Edit</option>
    <option value="itemdeleteCustomer">Delete</option>
    <option value="itemaddDevice">Add device</option>
</select>

<div id="addCustomer" class="dialog" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>
</div>

<div id="editCustomer"  class="dialog" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>
</div>
<div id="deleteCustomer"  class="dialog" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice"  class="dialog" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 
</div> ​​​​​​​

JQuery部分

$("#actionChooser").change(function(e) {
    $('.dialog').dialog('close');
    var val = '#'+$(this).val().replace('item', '');

    $(val).dialog('open'); 
});

   $("#addCustomer, #deleteCustomer, #addDevice, #editCustomer").dialog({// or just $('.dialog').dialog({
    autoOpen: false,
    draggable: true
});

编辑

使用您给定的 html(我修改了“对话框”部分):jsFiddle

 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<div id="popupMenu" style="z-index:19998;">
        <div class="dxm-popupMain dxm-shadow dxm-popup">
            <ul class="dx dxm-noImages dxm-gutter">
                <li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Expand
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Enable
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Edit Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Delete Customer
                </div><b class="dx-clear"></b></li><li class="dxm-spacing"></li><li class="dxm-item"><div class="dxm-content dxm-hasText">
                    Add Device
                </div><b class="dx-clear"></b></li>
            </ul>
        </div>
    </div>

<hr/>
<div id="addCustomer" class="dialog" title="Add Customer">
    <h2>Add Customer</h2>
    <label>Customer Name: </label><input type="text" name ="customerName" id="addCustomerName"/><br/>
    <input type="button" value="Submit" id="addCustomerBtn" /><br/>

</div>
<div id="editCustomer" class="dialog" title="Edit Customer">
    <h2>Edit Customer</h2>
    <label>Customer Name: </label><input type="text" name="editCustomerName" id="editCustomerName"/>
    <input type="button" value="Submit" id="editCustomerbtn"/> <br/>

</div>
<div id="deleteCustomer" class="dialog" title="Delete Customer">
    <h2>Delete Customer</h2>
    <label>Are you sure you want to delete this customer?</label><br/><br/>
    <input type="button" value="Yes" id="confirmDeleteCustomer"/> <input type="button" value="No" id="cancelDeleteCustomer"/>
</div>
<div id="addDevice" class="dialog" title="Add Device">
    <h2>Add Device</h2>
    <label>Device Id:   </label><input type="text" name="addDeviceId" id="addDeviceId"/><br/><br/>
    <label>Version:     </label><input type="text" name ="addDeviceVersion" id="addDeviceVersion"/><br/>
    <input type="button" value="Submit" id="addDeviceBtn"/> <br/> 

</div> 

jQuery 部分

$('div .dxm-content').click(function() {
    $('.dialog').dialog('close');
    var popupText = $.trim($(this).html());
    var dialogId;
    if (popupText.length > 0) {
        switch(popupText) {
            case 'Edit Customer' : dialogId = 'editCustomer';
            break;
            case 'Delete Customer' : dialogId= 'deleteCustomer'; 
            break;
            case 'Add Device' : dialogId = 'addDevice';
            break;
            case 'Add Customer': dialogId = 'addCustomer';
            break;
            default : dialogId='';
            break;
        }
        if (dialogId != '') {
            $('#'+ dialogId).dialog('open');
        }
    }
});

$('.dialog').dialog({
        autoOpen: false,
        draggable: true
    });