CHBD Simple jQuery Modal

This plugin will help users to show some nice sorts of jquery styles based on modal features into their websites.

Live Demo: http://www.arefin.me/plugins/chbd-simple-jquery-modal/

Plugin Features

• Shortcode is Enabled.
• Customization is Easy.
• Coding Knowledge is Not Obligatory.
• Small in Size.
• Total 5 Types of Modal Styles are Included.

How to Setup

1. After downloading the plugin, extract the ‘chbd-simple-jquery-modal.zip’ file to your computer.
2. Upload (if you use FTP) or put (if you use local computer) the extracted folder into ‘wp-content/plugins’ directory.
3. Now go to WordPress Plugin Dashboard.
4. In plugin list, you will see the plugin name you currently installed.
5. Just click on ‘Activate’ link and your plugin will be successfully installed.

How to Use

1. There are total five kinds of modals (popup, notify, dialog, hint and title) in this plugin. The usage procedures of all of these are very similar. You will just need to add 1, 2, 3, 4, 5 as the last characters in shortcode names and the plugin will work differently.

2. Popup Modal:

2a. In order to use the popup modal, use the shortcode as below:
[chbd_modal_1 id=”1″ color=”white” bgcolor=”green” place=”bottomCenter” text=”Put Text Here” description=”Put Description Here”]

2b. In this shortcode, id, color, bgcolor, place, text and description attributes are used. You can use one or more attributes. If you do not place one attribute, that will pick up the default value.

2c. The default values of these attributes are:
id = There is no default value for id. If you left this value blank, plugin will not work. If you use multiple instances of popup modal then you will have to set the id as 1, 2, 3 etc. This is not mandatory that you will have to use 1 or any, but become sure that you do not use same id in different instances.
color = Default is ‘#ffffff’
bgcolor = Default is ‘#439330’
place = Default is ‘bottomCenter’. Other possible values are ‘bottomLeft’, ‘bottomRight’, ‘leftTop’, ‘leftCenter’, ‘rightTop’, ‘rightCenter’.
text = Default is ‘Put Your Text’.
description = Default is ‘Put Your Description’.

1. Notify Modal:

3a. In order to use the notify modal, use the shortcode as below:
[chbd_modal_2 id=”1″ color=”white” bgcolor=”green” duaration=”2500″ text=”Put Text Here” description=”Put Description Here”]

3b. In this shortcode, id, color, bgcolor, duration, text and description attributes are used. You can use one or more attributes. If you do not place one attribute, that will pick up the default value.

3c. The default values of these attributes are:
id = There is no default value for id. If you left this value blank, plugin will not work. If you use multiple instances of popup modal then you will have to set the id as 1, 2, 3 etc. This is not mandatory that you will have to use 1 or any, but become sure that you do not use same id in different instances.
color = Default is ‘#ffffff’
bgcolor = Default is ‘#439330’
duration = Default is ‘2500’. Here duration refers to animation duration.
text = Default is ‘Put Your Text’.
description = Default is ‘Put Your Description’.

1. Dialog Modal:

4a. In order to use the dialog modal, use the shortcode as below:
[chbd_modal_3 id=”1″ color=”white” bgcolor=”green” text=”Put Text Here” header=”Put Header Here” description=”Put Description Here”]

4b. In this shortcode, id, color, bgcolor, text, header and description attributes are used. You can use one or more attributes. If you do not place one attribute, that will pick up the default value.

4c. The default values of these attributes are:
id = There is no default value for id. If you left this value blank, plugin will not work. If you use multiple instances of popup modal then you will have to set the id as 1, 2, 3 etc. This is not mandatory that you will have to use 1 or any, but become sure that you do not use same id in different instances.
color = Default is ‘#ffffff’
bgcolor = Default is ‘#439330’
text = Default is ‘Put Your Text’.
header = Default is ‘Put Your Header’.
description = Default is ‘Put Your Description’.

1. Hint Modal:

5a. In order to use the hint modal, use the shortcode as below:
[chbd_modal_4 id=”1″ color=”white” bgcolor=”green” text=”Put Text Here” description=”Put Description Here”]

5b. In this shortcode, id, color, bgcolor, text and description attributes are used. You can use one or more attributes. If you do not place one attribute, that will pick up the default value.

5c. The default values of these attributes are:
id = There is no default value for id. If you left this value blank, plugin will not work. If you use multiple instances of popup modal then you will have to set the id as 1, 2, 3 etc. This is not mandatory that you will have to use 1 or any, but become sure that you do not use same id in different instances.
color = Default is ‘#ffffff’
bgcolor = Default is ‘#439330’
text = Default is ‘Put Your Text’.
description = Default is ‘Put Your Description’.

1. Title Modal:

6a. In order to use the title modal, use the shortcode as below:
[chbd_modal_5 id=”1″ color=”white” bgcolor=”green” text=”Put Text Here” description=”Put Description Here”]

6b. In this shortcode, id, color, bgcolor, text and description attributes are used. You can use one or more attributes. If you do not place one attribute, that will pick up the default value.

6c. The default values of these attributes are:
id = There is no default value for id. If you left this value blank, plugin will not work. If you use multiple instances of popup modal then you will have to set the id as 1, 2, 3 etc. This is not mandatory that you will have to use 1 or any, but become sure that you do not use same id in different instances.
color = Default is ‘#ffffff’
bgcolor = Default is ‘#439330’
text = Default is ‘Put Your Text’.
description = Default is ‘Put Your Description’.

Do I need to know any coding to setup and use the plugin?

No, you do not need to know any kind of coding to setup this plugin. You will just need to follow the installation direction. Then you can do it. You can also see the live demo to get informed how plugin works.

Does the plugin support the option panel so that anybody can change the color, background etc. through a visual interface?

No, this plugin currently does not include any visual feature.

Can I customize the css or any other portion of this plugin easily?

Yes, you can easily customize any kind of design of this plugin if you have some coding knowledge, because this plugin is very user-friendly.

1. 

   CHBD Simple jQuery Plugin in Front End

2. 

   CHBD Simple jQuery Plugin Usage Codes

1.1

• Initial release