Navayan CSS Popup - Examples + Demo

  1. Basic (Fluid)
  2. Simple (Fluid)
  3. Lightbox (Fluid)
  4. Rounded Corners (Fluid)
  5. Dialogs :
    1. Success
    2. Danger/Error
    3. Warning
    4. Information
    5. Default
    6. Default + Transparent Outline
    7. One Liner + Transparent Outline
  6. Size :
    1. Fixed Width + Fluid Height
    2. Fixed Height + Fluid Width
    3. Minimum Width and Height
    4. Small (320 x 200)
    5. Medium (640 x 400)
    6. Medium 2 (640 x 400) + Transparent Outline + Overlay
    7. Medium 3 (640 x 400) + Transparent Outline + No Overlay
    8. Large (1000 x 625)
  7. Popup Position :
    1. Top Left
    2. Top Center
    3. Top Right
    4. Bottom Left
    5. Bottom Center
    6. Bottom Right
    7. Left Middle
    8. Right Middle
  8. Close Button Outside
  9. Close Button Outside 2 + Transparent Outline + Overlay
  10. Content Scroll
  11. Footer (+ text and buttons)
X
Popup type - Basic (Fluid)

Text inside popup container

My social philosophy may be said to be enshrined in three words: LIBERTY, EQUALITY and FRATERNITY. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Simple (Fluid)

Text inside popup container

Religion in the sense of morality, must therefore, remain the governing principle in every society. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Lightbox (Fluid)

Text inside popup container

Greatness can be achieved only by struggle and sacrifice. Neither manhood nor godhood can be obtained without going through the ordeal of fire. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Rounded Corners (Fluid)

Text inside popup container

I will accept and follow the teachings of Buddha. I will keep my people away from the different opinions of Hinyan and Mahayan, two religious orders. Our Bouddha Dhamma is a new Bouddha Dhamma, Navayan. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Dialog - Success

Text inside popup container

X

Navayan CSS Popup

Popup type - Dialog - Danger

Text inside popup container

X

Navayan CSS Popup

Popup type - Dialog - Warning

Text inside popup container

X

Navayan CSS Popup

Popup type - Dialog - Information

Text inside popup container

X

Navayan CSS Popup

Popup type - Dialog - Default

Text inside popup container

X

Navayan CSS Popup

Popup type - Dialog - Default + Transparent Outline

Text inside popup container

X
Navayan CSS Popup - One Liner, ellipsis for two+ lines text
X

Navayan CSS Popup

Popup type - Fixed Width

Text inside popup container

My social philosophy may be said to be enshrined in three words: LIBERTY, EQUALITY and FRATERNITY. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Fixed Height

Text inside popup container

My final word of advice to you is EDUCATE, AGITATE and ORGANIZE, have faith in yourselves and never lose hope. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Min Width and Min Height

Text inside popup container

I will accept and follow the teachings of Buddha. I will keep my people away from the different opinions of Hinyan and Mahayan, two religious orders. Our Bouddha Dhamma is a new Bouddha Dhamma, Navayan. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Small (320 x 200)

Text inside popup container

X

Navayan CSS Popup

Popup type - Medium (640 x 400)

Text inside popup container

He that WILL NOT reason is a bigot. He that CANNOT reason is a fool. He that DARE NOT reason is a slave. ~ H. Drummond
X

Navayan CSS Popup

Popup type - Medium + Transparent Outline + Overlay

Text inside popup container

Religion in the sense of morality, must therefore, remain the governing principle in every society. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Medium + Transparent Outline + No Overlay

Text inside popup container

The distance you have gone is less important than the DIRECTION in which you are going today. ~ Leo Tolstoy
X

Navayan CSS Popup

Popup type - Large (1000 x 625)

Text inside popup container

My social philosophy may be said to be enshrined in three words: LIBERTY, EQUALITY and FRATERNITY. ~ Babasaheb Dr. B. R. Ambedkar
X

Navayan CSS Popup

Popup type - Position : Top Left

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Top Right

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Bottom Left

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Bottom Right

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Top Center

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Bottom Center

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Left Middle

Text inside popup container

X

Navayan CSS Popup

Popup type - Position : Right Middle

Text inside popup container

X

Navayan CSS Popup

Popup type - Close Outside

Text inside popup container

X

Navayan CSS Popup

Popup type - Close Outside + Transparent Outline + Overlay

Text inside popup container

X

Navayan CSS Popup

Popup type - Content Scroll

Text inside popup container

Heading one Heading two Heading three Heading four Heading five
CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content
CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content
CSS popup content CSS popup content CSS popup content CSS popup CSS popup content CSS popup content content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content
Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content

CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS

CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content

CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content

CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content CSS popup content

X

Navayan CSS Popup

Popup type - Footer

Text inside popup container

You can put some text in tag or action buttons inside footer, with .text-left / .text-center / .text-right classes

Buttons

I will accept and follow the teachings of Buddha. I will keep my people away from the different opinions of Hinyan and Mahayan, two religious orders. Our Bouddha Dhamma is a new Bouddha Dhamma, Navayan. ~ Babasaheb Dr. B. R. Ambedkar
some text