How to create beautiful popup? [closed]

StackOverflow https://stackoverflow.com/questions/23247869

  •  08-07-2023
  •  | 
  •  

Question

I have file .js which has following code:

 jQuery("body").append('<div id="mask"></div><div id="maskbox1">This popup will be closed after few seconds <br/><button id="maskbutton1">Register</button></div>;
 jQuery("#mask").css({
     'position': 'fixed',
     'z-index': 8000,
     'background-color': '#000',
     'display': 'none',
     'top': 0,
     'opacity': 0.4,
     'filter': 'alpha(opacity=40)'
 });
 jQuery("#maskbox1").css({
     'position': 'fixed',
     'z-index': 9000,
     'background-color': '#fff',
     'display': 'none',
     'top': 0,
     'opacity': 0.9,
     'filter': 'alpha(opacity=90)',
     'padding': '10px',
     'width': '400px',
     'height': '110px'
 });

The problem is this popup is ugly. So, how to add title to this popup and make it more beautiful ?

Example: http://webdesigntutsplus.s3.amazonaws.com/tuts/316_modal/source/index.html

Thank you very much !

Was it helpful?

Solution

you can style the pop-up div any way you would like using CSS and HTML. I would suggest going through a CSS tutorial which starts to explain each property and what the possible values are and go from there.

The div that is being shown there can be edited just like any other div on any other page. Here is an example of a good CSS tutorial to get started with. Or you can go to Google and just type "learn CSS" or "Css tutorial"

As far as your specific question , it's not really the format of the site to ask a question where you want someone els to edit your css and make it "beatiful" . That is yuor job, if you get stuck of a specific problem, then we can assist getting you a solution for your specific problem.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top