How to make background (out of popup) inactive in jQuery UI, when popup appears?

There is a nice pop-up (dialog) in jQuery UI. It is easy to implement and control. The dialog window can be moved, resized and closed with the 'x' icon. 

There is a small example below;

***************************
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful<br/> for displaying information.</p></div>----------------------------------------
var commDialog = $("#dialog").dialog({ autoOpen : false, resizable : false, height : 520, width : 550, show : { effect : "fade", duration : 1000 }, hide : { effect : "fade", duration : 500 } });

commDialog.dialog('open');
commDialog.dialog('close');
***************************

*** Sometimes, when a pop-up appears, an user is forced not to use any other element out of pop-up element. It can be provided with disabling background behind the pop-up. There are two solution to disable background.

a) First solution is classic masking;

***************************
<div class="mask"></div>
----------------------------------------
.dialog {
position:absolute; z-index: 1; }

.mask { position: fixed; top: 0; left: 0; background: #000; opacity: 0.8; z-index: 2; height: 100%; width: 100%; }
----------------------------------------
$(".mask").fadeIn('slow');
$(".mask").fadeOut('slow');
***************************

b) Second is gained by using a property of JQuery UI Dialog;
 >> Related property is "modal". When "modal" is true, it means that masking is supplied on the background.

***************************
var commDialog = $("#dialog").dialog({
autoOpen : false, resizable : false, modal: true, height : 520, width : 550, show : { effect : "fade", duration : 1000 }, hide : { effect : "fade", duration : 500 } });
***************************

Container Managed Authentication

Authentication and authorization is not so easy work-load for programmers who are not expert on JSF framework. Understanding different solutions and choosing the right one based on requirements is very critic in this context. Solutions I mention can be categorized such as;

A - Java EE Container Managed Authentication

B - Homegrown a Servlet Filter

C - 3rd Party Java EE Authentication Frameworks

While I was searching the right solution, I worked on small examples on JSF 2.x, Tomcat 7.0 and Hibernate. One of them was developed based on container managed authentication. I think that this solution is the easiest to implement on Web applications. There are five steps to adapt this solution into your application;

 1) Configure server.xml  on the Tomcat directory;

<Realm className="org.apache.catalina.realm.JDBCRealm"
       driverName="com.mysql.jdbc.Driver"
       connectionURL="jdbc:mysql://localhost:3306/authentication_db"
       connectionName="..." connectionPassword="..."
       userTable="user" userNameCol="USER_NAME" userCredCol="PASSWORD" 
       userRoleTable="usergroup" roleNameCol="USER_GROUP_NAME" />

2) Create entities (User and User Group) based on JDBCRealm implementation on the link - https://tomcat.apache.org/tomcat-6.0-doc/realm-howto.html#Standard_Realm_Implementations. 

3) Not to forget updating hibernate mapping files of entities based on changes on entities after Step-2. JDBCRealm Implementation needs many-to-many relationship between User and User Group tables, that's why related tags on mapping files should be configured properly.

4) Configure web.xml file;

    <security-constraint>
        <display-name>Restricted</display-name>
        <web-resource-collection>
            <web-resource-name>Restricted Area</web-resource-name>
            <url-pattern>/authorized/*</url-pattern>
            <http-method>GET</http-method>
            <http-method>POST</http-method>
        </web-resource-collection>
        <auth-constraint>
            <role-name>user</role-name>
        </auth-constraint>
    </security-constraint>
    <login-config>
        <auth-method>FORM</auth-method>
        <form-login-config>
            <form-login-page>/login.xhtml</form-login-page>
            <form-error-page>/login.xhtml</form-error-page>
        </form-login-config>
    </login-config>
    <security-role>
        <role-name>user</role-name>
    </security-role>

5) Lastly, create your login function;

public String login(){

        HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest();
        try {
            //Login via the Servlet Context
            request.login(getLoginName(), getLoginPass());


            return "success";
        } catch (ServletException e) {
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid Login", null));
            e.printStackTrace();
        }
        return "failure";
}

Optimization can be made based on reqirements of an application, but the development-process will be similar I present above for container managed authentication.