CSS Modal Dialog With Semi Transparent Border

Few days ago I was working on UI for one of my projects. I needed to create a pop up dialog with semi opaque background around it, something like Facebook has.  Since my CSS skills are not too powerful, I turned to Google to look for a tutorial(s).

Many resources that I have found, make use of images when creating semi transparent background around dialogs. I did not want to do that, I wanted to make use of pure CSS. It did take me quite a few hours to find what I wanted to do.

Finally, after reading a number of tutorials on the Internet, I have came up with a solution that did what I wanted.

The following is a screen shot of my pop-up using Firefox:

Firefox  - dialog with semi opaque background using pure CSS

Firefox - dialog with semi opaque background using pure CSS

The following is a screen shot of my pop-up using Internet Explorer:

Internet Explorer - dialog with semi opaque background using pure CSS

Internet Explorer - dialog with semi opaque background using pure CSS

The following is a code snippet from a test page that I did. Its an example of HTML structure of DIVs that create the popup. The CSS styles are located in the head section of the test page. jQuery is also included (it adds some minor effects, plus its centers the popup in the middle of the screen). Its pretty straight forward, so just download, unzip and run it. I have tested the popup in Firefox, IE6,IE7, Safari (Win) and Google Chrome, so I can say it works fine in all major browsers.

<div id="dialog-box-parent-container">
	<div id="dialog-box-transparent-background" class="opacity-70 box-round-all-8px"></div>
	<div id="dialog-box-header" class="box-round-top-4px">
		<h2 class="box-round-top-4px">
			<span class="dialog-box-header-content">Action Completed</span>
		</h2>
	</div>
	<div id="dialog-box-content" class="box-round-bottom-4px">
		<div id="dialog-box-text">blah blah blah</div>
		<div class="dialog-box-buttonpane">
			<a class="dialog-box-button">Okay</a>
		</div>
	</div>
</div>

I hope this example provides you enough information how to create modal popup dialog using pure CSS. The source code is attached: jquery modal dialog with semi-opaque border

Please let me know if you have any questions,

Cheers

Social Networking: The Next Big Thing?

I came across a new social site couple of days ago. This happened purely by accident – I was trying to book a cafe shop or a bar for a company’s lunch out and was searching for some cheap bargains for a group booking.

The Google search has led me to MyZerr.com. The first thought that I had was “Oooh, another site of Facebook type”. But by looking a bit closer I saw that the site has a twist:

Apart from being a social networking online community, MyZerr.com also allows you to search for coupons and bargains from local businesses, communities & online stores worldwide (This is why I ended up on MyZerr.com as I was searching for bowling bargains).

I think the idea is very simple, yet brilliant – help businesses to offer bargains and discounts to people across the world through social networking. At the end of the day, the one who is benefiting here is the end user, the consumer. Simply put – very cool.

On the Hunt Again and Need Your Help

Well, I have decided – its time for me to move on… Although my current company was/is a good home for over two years, it is time for me to look for another job. I was hired as a J2EE developer by my current company, but after the Java project has finished, I ended up as a PHP developer (Not that there is something wrong with PHP).

As much as it was good to get some hands on PHP experience, I want to pursue a different career path, to do what I really have passion for – Java/J2EE.

I started by updating my resume, which can be viewed here and my LinkedIn profile. I met with my manager for a chat and told him about my future plans and explained him my reasons. He showed understanding and totally supported my decision.

I want to point out that I really enjoy working for a premium SMS aggregator and SMS/MMS area in general, I think its great fun. It would be nice to have my next job related to Telecom too. I responded to several job advertisements that I found on seek.com.au, and even got a few phone calls from two recruiters.

This is already good, it means that people show interest. Having said that, I want to provide some information about my self where I clarify why someone should or should not hire me.

So yeah … why should we hire you?
Well, I can start talking now how with my knowledge and skills I can contribute and help your business grow. But to make it simple – I love programming and I love what I do. I am not saying that I am brilliant at programming, but I think that I am good enough (I am not sure whether it is fair to rate my self).

As an example, I remember times when I managed to find a working solution to the problem that I had during the day while getting a night sleep and dreaming. (Hence the idiom “sleep on it”)

What kind of company are you looking for?
From what I have learned about my self, I enjoy working in more casual and less corporate environment. I feel less productive and less creative in an environment where people make tech decisions according to internal politics. I do not like it, its distracting. I can get frustrated when I need to get signatures of N people to install some software package on my workstation.

I prefer working for open source oriented company and don’t fancy an idea getting stuck in proprietary software house (ie. Microsoft). Not that there is something wrong with Microsoft, yeah?

Having said all that, I want to say that I can work for any type of company, its just from a working culture point of view, corporations are not the highest priority for me.

Are you a die hard geek?
Hm… not a die hard geek, but a geek. Being a programmer for me is not 9 – 5 job. I do like programming and like to tinker with code when I have some free time. I do have other hobbies apart from programming and some of them include my gf and sport. Ok, ok … my gf is not a hobby ;) I like have a few drinks with friends, play a bit of soccer (never really got into Footy) and I box sometimes.

Can you work under pressure, do you manage stress well?
Hey, that is two questions in one. I can work under pressure if I have a deadline. Generally I do manage stress well, and when I am not, I just need to remember to walk away from the computer and go for a walk to clear my mind. Also, bright ideas do not come into my mind when I stare at the screen.

Are you a team player?

Yes, definitely … I get along well with people from various cultural backgrounds and have a lot of experience working in small teams. I think one of the keys to be a good team player is communication skills and ability to compromise.

Do you have experience in managing projects or people?
Nope, never managed a project nor people. Not that I refused, its just never happened. I would not mind to try my self out in managing a small project with one or two developers.

In what area would you like to improve?

Hm… I really want to improve my software design skills. To be able to manipulate well different design patterns and come up with really smart and efficient software solutions. Sometimes I really feel lack of experience in this department.

Well, that’s pretty much it :) I think I have finally managed to paint a scary portrait of my self. I hope my job search wont be a very long one.

If you would like to comment on anything I have wrote here – please do so. Your comments/suggestions/flames are always welcomed.

Cheers,

Alex