Hiding A Dropdownlist Behind A Jquery Ui Dialog

Hiding A Dropdownlist Behind A Jquery Ui Dialog

The phrase 'teaching an old dog new tricks' comes to mind as I start this entry. Nearly two years ago I wrote about how to hide a DropDownList box behind another layer.

The phrase 'teaching an old dog new tricks' comes to mind as I start this entry. Nearly two years ago I wrote about how to hide a DropDownList box behind another layer. The reason why this is important is a DropDownList is rendered as a system control and not a visual element that originates in the browser. This causes issues when rendering layers over a DropDownList because the DropDownList shows through the higher layer.

I think this issue has been resolved in the newer browsers, but there is still a proliferation of Internet Explorer 6.0. This week I was testing one of my newer sites in IE 6 and found this issue popped up with a jQuery UI Dialog. So I thought I would solve the issue with a slightly more modern, jQuery way.

The jQuery UI dialog has two events you need to define functions, open and beforeclose. These events execute when the dialog opens and just before it is closed, as their names imply. In the settings for the dialog the functions can be defined. Really all that needs to be done is hiding and showing the select elements in the markup. This is very easy to do, just define a selector to get all the selector elements that could possible be behind the dialog. Using the example from the Confirmation Dialog post the selector could be as simple as '#ContactForm select'.

$(
"#IAgree"
).dialog({ bgiframe: 
true
, resizable: 
true
, height: 640, width: 640, modal: 
true
, open: 
function
(
event
, ui) { $(
'#ContactForm select'
).hide(); }, beforeclose: 
function
(
event
, ui) { $(
'#ContactForm select'
).show(); }, closeOnEscape: 
false
, overlay: { backgroundColor: 
'#000'
, opacity: 0.65 }, buttons: { 
'I Agree'
: 
function
() { $(
this
).dialog(
'close'
); } , 
'Cancel'
: 
function
() { window.location = 
'privacy.aspx'
; } }});

Now when the dialog opens and closes any select statement is hidden and redisplayed in response to the dialog. Thus solving our problem.

ui

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

UI Designer Vs UI Developer

UI Online Course at OnlineITGuru with 7 years of hands on exp. trainer,Job oriented UI online training with live project in USA,UK,INDIA

UX designer ? UI designer ? UI Developer ?

**The UX designer** is someone who thinks about what should the user flow be like, which page should lead to which page, when should a confirm popup appear or not appear, should there be a listing page before or after a create-new page, should...

A Comprehensive Guide to UI

UI or User Interface is the interface that is the access point where users interact with computers. It is also a way through which users can interact with a website or an application. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled ones, a keyboard, a mouse, and the appearance of a desktop.

DIFFERENCE BETWEEN UI/UX DESIGNER AND UI/UX ENGINEER

Our UI Online Training will provide you to learn about user interface and its different features with realty. Our UI Online Course also includes live sessions, Projects.

UI/UX Design Company

At Data EximIT, we offer our best Ui/UX Design service with the aim of craft unique and impressive. As a top leading **[UI/UX Design Company](https://www.dataeximit.com/ui-ux-design-services/ "UI/UX Design Company")**, we at Data EximIT design...