• Problems

  This line enable URL Rewriting . It must be enabled via the RewriteEngine directive! and if your .htaccess file is going to use rewrite rules, you should always include this line. Otherwise, you can’t be sure if its enabled or not. The string “on” is case insensitive.

A model is a child window that is layered over its parent window . Typically , the purpose is to display content from
a separate source that can have some interation without leaving the parent window .Child windows can provide information ,
intersction , or more.Generally model are used for showing important notice, facebook page , E-mail subscription ...

Step for creating model:
1)Include bootstrap css file, bootstrap javascript file and jquery .
If you want to include this plugin functionality individually, then you will need modal.js.

2)Creating Trigger:Trigger can be created using button or link with attributes data-toggle="modal"
and data-target="#modalid" or href="#modalid" to target a specific model (with the id="madalid") to toggle
    For Example:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalid">Open Modal</button>

3)Creating A simple  Model:This is simple model which show content in pop up window

<div class="modal" id="modalid">
My simple model
</div>

Above Code Explaination:
The parent <div> of model must have id that is the same as
the value of the data-target attribute used to trigger the model ("modalid").
The .modal class identifies the content of <div> as a modal and bring focus to it.


4)Adding style to Your model:

<div class="modal fade" id="modalid">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"> This Modal title</h4> </div>
<div class="modal-body"> Add some text here </div>
<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</div>
</div>

Above Code Explaination:
a)Adding fade effect to your modal:The .fade class adds a transition effect which fades the modal in and out .Remove the class if you do not want the effect

b)Adding size to your modal:Change the size of the modal by adding the .modal-sm class for small modals or .modal-lg class for large modals.
Add the size class to the <div> element with class .modal-dialog .


b)Adding Proper width and margin of the model:The div with .modal-dialog class sets the proper width and margin of the model
       <div class="modal-dialog">
       </div>
c)Adding border , background for your model : The <div> with class="modal-content " styles the
modal (border, background-color, etc.).
       <div class="modal-content">
       </div>
d)Adding header for your modal : The <div> with class="modal-header " is used to define the style
for the header of the modal and the .modal-title class styles the header with a proper line-height.
       <div class="modal-header">
       <h4 class="modal-title">This Modal title</h4>
       </div>
e)Adding body for your modal : The <div> with class="modal-body " is used to define the style
for the body of the modal .Add any HTML markup here: paragraphs, images, videos, etc
       <div class="modal-body">
      Add any HTML markup here: paragraphs, images, videos, etc
       </div>
f)Adding footer for your modal : The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right
aligned by default.
       <div class="modal-footer">
      </div>

5)Adding Close Function to your modal:
 The <button> inside the
header has a data-dismiss="modal" attribute which
closes the modal if you click on it. The .close class
styles the close button.


6)Improving accessibility feature:The attribute role="dialog" improves accessibility
for people using screen readers.

For Example:
<div class="modal" id="modalid" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button>
<h4 class="modal-title" id="myModalLabel"> This Modal title</h4> </div>
<div class="modal-body"> Add some text here </div>
<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close </button>
</div>
</div>