small medium large xlarge

Back to: All Forums  HTML5 and CSS3
Generic-user-small
11 Feb 2017, 17:24
Sunny Jain (1 post)

How do I ensure that each user’s pop-up shows up on top it when clicked open? and How do I make this responsive using flex model?

Small (below 600px width): contact list in one column. - Large (equal or bigger than 600px width): contact list in three columns.

Here’s my CSS:

body { padding: 0; margin: 0; }

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

main .wrapper { padding-left:3px; display: flex; flex-wrap:wrap; flex-direction:row; }

.user-container { position: relative; padding: 5px 8px; border: 1px solid lightgray; float: left; width: 33.33%; margin-left: -1px; margin-top: -1px; }

.user-img { border-radius: 50%; margin-left: 2px; vertical-align: middle; margin-right: 7px; }

.user-name{ display:inline-block; vertical-align: middle; }

.user-lastname, .modal-lastname { text-transform: uppercase; color: gray; font-family: “Times New Roman”, Courier, sans-serif;

}

.user-firstname, .modal-firstname { text-transform: capitalize; color: gray; font-family: “Times New Roman”, Courier, sans-serif;

}

.modal-name { text-align: center; padding: 10px; display: block; }

.sort-label { color: gray; font-size: 1.2em; position: absolute; right: 50px; top: 30px; }

.sortasc, .sortdes { text-decoration: none; height: 30px; margin-left: 10px; color: gray; }

.user-modal { position: relative; left: 30px; height: 20%; width: 30%; border: 2px solid lightgray; border-radius: 7px; margin-top: 0; background: linear-gradient(180deg, white, 90%, lightgray); box-shadow: 2px -5px 5px lightgray; z-index: 1; }

.modal-img { border: 2px solid lightgray; border-radius: 50%; display: block; margin: auto; margin-top: 10px; }

.model-label { display: inline-block; color: gray; margin-left: 20%; font-family: Calibri, “Times New Roman”, sans-serif; font-weight: bold; text-shadow: 1px 1px lightgray; min-width: 50px; }

.user-info { line-height: 1.5em; text-align: left; }

.user-badge { position: absolute; left: -80px; top: 100px; height: 60px; width: 190px; border: 1px solid lightgray; border-radius: 3px; background: linear-gradient(180deg, coral, 50%, orangered); box-shadow: 2px 2px 3px lightgray; padding: 7px 12px; transform: rotate(90deg); text-align: right; }

.user-badge p { margin: 0; }

.badge-name { font-weight: bold; text-shadow: 1px 1px lightgray; }

.badge-name-value { color: #F2F2F2; text-shadow: 1px 1px lightgray; }

.close-btn { position: absolute; right: 25px; top: 15px; color: gray; text-decoration: none; font-weight: bold; font-size: 1.4em; }

.active { background-color: #F0F0F0; }

HTML:

Contact List

JS:

$(document).ready(function(){ $.getJSON(“https://api.randomuser.me/?results=25”, function(data){

    var heading = $("header").append("<h1>Contact List</h1>").css({"text-align":"center", "color":"gray", "text-shadow":"1px 1px lightgray"});

    var sortlabel = $("<label class='sort-label'>sort</label>").appendTo(heading).addClass("sort-label");
    var sortasc = $("<a href='#' class='sortasc' id='btn-asc'>&uarr;</a>").appendTo(sortlabel);
    var sortdes = $("<a href='#' class='sortdes' id='btn-des'>&darr;</a>").appendTo(sortlabel);

    var dataLength = data.results.length;   

    var wrapper = $("<div class='wrapper'></div>").appendTo("main");
	



    for(var i=0; i<dataLength; i++)
    {
        /*User data/div container */
        var modalId = "mod-"+i;
        user = $("<div class='user-container' data-mod-id='"+modalId+"'/>").appendTo(wrapper);          
        img = $("<img class='user-img' src='" + data.results[i].picture.thumbnail + "'/>").appendTo(user);
        userName = $("<span />").appendTo(user).addClass('user-name');
        lastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(userName).addClass('user-lastname'); 
        firstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(userName).addClass('user-firstname'); 




        /*User Modal or Pop-up starts here*/            

        userModal = $("<div id='"+modalId+"' class='user-modal' />").appendTo(wrapper);
		closeBtn = $("<a href='#' class='close-btn'>&times;</a>").appendTo(userModal);
        modalImg = $("<img class='modal-img' src='" + data.results[i].picture.large + "'/>").appendTo(userModal).addClass('modal-img');
        userBadge = $("<div class='user-badge' />").appendTo(userModal);
		badgeName = $("<p class='badge-name'>username</p><p class='badge-name-value'>" + data.results[i].login.username + "</p>").appendTo(userBadge); 
        modalName = $("<div/>").appendTo(userModal).addClass('modal-name');
        modalLastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(modalName).addClass('modal-lastname'); 
        modalFirstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(modalName).addClass('modal-firstname'); 
        modalInfo = $("<div />").appendTo(userModal).addClass('modal-info');
        email = $("<label class='model-label'><em>email</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].email + "</span><br />").appendTo(modalInfo);
        phone = $("<label class='model-label'><em>phone</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].phone + "</span><br />").appendTo(modalInfo); 
        street = $("<label class='model-label'><em>street</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.street + "</span><br />").appendTo(modalInfo); 
        city = $("<label class='model-label'><em>city</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.city + "</span><br />").appendTo(modalInfo); 
        state = $("<label class='model-label'><em>state</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.state + "</span><br />").appendTo(modalInfo); 
        zip = $("<label class='model-label'><em>zip</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.postcode + "</span><br />").appendTo(modalInfo); 

        /*User Modal or Pop-up ends here*/


    }
	
	/* Sort function */
    	
		allUsers = $(".user-container");
		
		$("#btn-des").on('click',function(){
			var desc = allUsers.sort(function(a,b){
				return $(a).find(".user-name").text() > $(b).find(".user-name").text(); 
			});
            $(".wrapper").html(desc);				 
		});
		 
		$("#btn-asc").on('click',function(){
			var asc = allUsers.sort(function(a,b){
				return $(a).find(".user-name").text() < $(b).find(".user-name").text();					 
			});
            $(".wrapper").html(asc);				 
		});
	
	/* User pop-up Hide/Show */
    $('.user-modal').hide(); //for hiding all modals on load
	$('.close-btn').click(function(){
		$(this).parent().hide();
	});
	$('.user-container').click(function(){
		$('.user-modal').hide();
		$("#"+$(this).attr("data-mod-id")).show();
	});
	/* User pop-up Hide/Show */
}); });
You must be logged in to comment