下拉列表呈现在模态页面上

Question

我在Apex 5中制作HTML应用程序

我有一个下拉列表，不打算由用户直接选择。当用户点击它时（实际上当项目被聚焦时），它会打开一个模态页面来显示要选择的项目列表。

（我这样做是因为下拉列表无法显示任意HTML元素。）

在焦点事件中，javascript触发并

• 模糊选择列表（使其失去焦点）
• 打开模态页面，显示要选择的项目。模态页面会自动选择项目。

问题是，当用户点击列表时，会显示他的下拉列表，并在模态页面上呈现。

我在此图片上显示问题和预期结果： https://i.imgur.com/EWZCgAk.png

为避免在模态页面上呈现下拉列表，我尝试了

• 要禁用下拉列表，但它也会禁用其可聚焦性和可点击性。

• 设置他的＆＃34;尺寸＆＃34;属性为1和0.它不会阻止呈现下拉列表。

Answer 1

尝试为模态提供比下拉列表更大的z-index。

https://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

我找到了解决方法。我禁用选择列表，然后打开模态页面，然后等待500毫秒，并启用选择列表

var p1_SelectList=document.getElementById("P1_My_Select_List");

p1_SelectList.disabled = "disabled";

//Open modal page

setTimeout(function(){
    p1_SelectList.disabled = "";
}, 500);