NbePopUp

just simple fade pop up

Documentation

first we need jquery

then we need these styles

.nbe-pop-up {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #000000bf;
	top: 0;
	z-index: 9999;
	display: none;
	left: 0;
}
.nbe-pop-up-content {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	background-color: #fff;
	padding: 0;
	transition: 1s all;
	border-radius: .5px;
	opacity: 0;
}
.nbe-pop-up-holder {
	max-width: 820px;
	position: relative;
	margin: auto;
	width: 100%;
}
.show-nbe-pop-up {
	width: 100%;
}
    

it's ok to change with or height or border radius and back ground but it dont change the position and displays

then we need the class NbePopUp (you can find it bellow the html file)

then we need our popup html and some trigger
triggers can be any element but pop up must be like this(obviusly you can have any thing replace of content.. ..)

<div class="nbe-pop-up">
  <div class="nbe-pop-up-holder">
	<div class="nbe-pop-up-content">
		contetn content contetn content contetn content contetn content contetn content contetn content contetn
		content contetn content
	</div>
  </div>
</div>
  

and now we must make the js and browser know that which elment will make the pop up appear by clicking on it
for that we use 2 attribiut
one is for the triger which is this: nbe-pop-triger="sometext"
second one is for the popup it self which is this:nbe-pop-trigee="sometext"
make sure both values are the same like now that both of them are "sometext"
and in the end they become like this:

<button class="can-be-any-thing" nbe-pop-triger="name">click here</button>
<div class="nbe-pop-up" nbe-pop-trigee="name" >
  <div class="nbe-pop-up-holder">
	<div class="nbe-pop-up-content">
		contetn content contetn content contetn content contetn content contetn content contetn content contetn
		content contetn content
	</div>
  </div>
</div>