Very Simple Model Popup Box HTML,CSS and BASIC JQUERY

A modal dialog is not truly modal if you can see and interact with the page that it is overlaying. To complete this we need to create an overlay that will be semi opaque and sit between the Confirmation dialog and the page.

JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box Etc.
That gives us our HTML and CSS. Now for the jQuery.

While there are many libraries out there that provide this, many of them are over-engineered to do more than the simple requirement of displaying a confirmation dialog with an Ok/Cancel button. Another requirement is how to make the dialog work like the Confirm dialog so that a return value can be tested for the user interaction. This article will show how to build a simple popup dialog using a few lines of jQuery.

We have two options for creating the markup for the popup

I. We can simply put it into the document
II. We can create the markup dynamically with jQuery

For this example we are going to go with option 2. To achieve this we need to convert the overlay and popup markup into jQuery calls to create the elements required.

Read More

What is CSS Syntax and Selectors

A style rule is made of three parts −

    Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1>,<h2>.......<h6> or <table> etc.


    Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.


    Value - Values are assigned to properties. For example, color property can have value either red or #F2F2F2 etc.

Read More

What is Cascading Style Sheets (CSS)?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files.

CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS

•  CSS saves time
•  Easy maintenance
•  Offline Browsing
•  Multiple Device Compatibility
•  Pages load faster 
•  Superior styles to Html
•  Global web standards

  
   
   
   
   
   

Read More

Web Browsers

The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document:

Read More

Html Use br,pre and hr Tag

HTML LINE BREAKS

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph.

The <br> tag is an empty tag, which means that it has no end tag.

CODE

<p>This is<br>a paragraph<br>with line breaks.</p>

VIEW

HTML <PRE> ELEMENT

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks

CODE

<pre>
  Element defines preformatted text.
  Element defines preformatted text.
  Element defines preformatted text.
  Element defines preformatted text.
</pre>

VIEW

HTML HORIZONTAL RULES

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page

CODE

<h1>This is heading 1</h1>
<p>This is paragraph 1.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is paragraph 2.</p>
<hr>

VIEW

Read More