Search
Sunday 22 October 2017
  • :
  • :

How To Show Open Layover Popup Using J-Query In Asp.Net MVC Development?

Today, we will explain how to show layer over popup using J-Query.

Sometimes, there is a requirement to set more controls on small space, at that time we can use popup div and set remaining controls on that and easily get the value of that controls on same page.

Take an example, a CA company has many clients and all are not fit in left side menu, so that time we can set mostly used client on lest menu and others are in popup div which will open on plus sign. Something like following image.

1

I am using MVC to explain above example because MVC application already contains required js files, you can create this demo using any application, but at that time you have to address application with required js. So, create an MVC application then design left side menu using div tags. Then follow the steps to create menu as above image.

  1. Add div with closed class as below.

<divclass=”closed”>

<spanstyle=”font-size: small;”><b>Company</b></span>

</div>

  1. Add another div which contains three different divs as below.

<divclass=”menu”>

<div>//this will be a main menu items which will show on left menu

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>Acqua Group<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>American Arts & Graphics<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>Anchor Computer Inc<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>Armon Communications<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>Bender &Hatley Pc<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>Berhanu InternationalFoods<br/>

<inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>C 4 Network Inc<br/>

</div>

//this will create Plus sign image

<divclass=”plus”onclick=”funcShow(this);”>

<imgsrc=”~/Images/plus1.png”/>

</div>

//this div will contains remaining items

<divclass=”showPopup”>

<divid=”close”class=”closeImg”onclick=”funcClose(this);”></div>

<table>

<tr>

<td><inputtype=”checkbox”name=”chkCompay” class=”chkBx”/>CalaverasProspect</td>

<td>//take all other company as chack box and design them with table as above image</td>

</tr>

</table>

</div>

</div>

  1. Now we create css which are useful to design menu and divs, also these classes are useful to perform show/hide events.

.closed {

background :url(/Images/arrow_close.png)no-repeat90%top;

cursor: pointer;

}

.opened {

background :url(/Images/arrow_open.png)no-repeat90%top;

}

.closeImg {

background: rgba(0,0,0,0)url(“/Images/close.png”)no-repeatscroll100%center;

cursor: pointer;

float: right;

height: 24px;

width: 24px;

}

.showPopup {

background: #f0f0f0;

border: 1pxsolidgray;

height: 100%;

width: 100%;

position: absolute;

display: none;

padding-left: 0.5%;

overflow: auto;

}

  1. Following is the javascript code to perform show/hide div on left menu and also show popup on plus sign click event.

This will open drop down when click on menu item, in our case it is “Company” and apply “opened” class to that div.

$(‘.closed’).click(function () {

$(this).next().slideToggle();

$(this).toggleClass(‘opened’, 500);

});

Following javascript function will open layover popup with animation when plus sign click event occurs.

functionfuncShow(_btn) {

var height = $(_btn).next().height();

var width = $(_btn).next().width();

varov = $(_btn).next();

varpos = $(_btn).offset();

ov.css({

left: pos.left + ‘px’,

top: pos.top + ‘px’,

width: 0,

height: 0

})

.show()

.animate({

left: pos.left + 40 +’px’,

top: pos.top – 70 + ‘px’,

width: ‘35%’,

height: ‘25%’

}, 500);

}

And following function useful to close that popped div with animation when click on cross sign on top-right corner of popped div.

functionfuncClose(_btn) {

var height = $(_btn).parent().css(‘height’, ‘auto’);

var width = $(_btn).parent().css(‘width’, ‘auto’);

$(_btn).parent().hide(500, function () {

$(this).animate({

width: width,

height: height

});

});

}

Note: The selection on popped div remain selected after closing popped div using cross sign as below image, so you can use their value for further operations on page.

2

Hope you understood all the instances well. If you have any query related to asp.net MVC development, ask the experts directly. To share your thoughts about this post, please make comments.




Leave a Reply