Skip to content

siva7170/myOwnDialog

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits

css

css

 
 

js

js

 
 

README.md

README.md

 
 

modal.html

modal.html

 
 

Repository files navigation

myOwnDialog

Modal box - jQuery - Simple and very effective modal box. Demo

Getting Started

This plugin is work with jQuery. So, you need below requirements to work with this datepicker

Prerequisites

  • Latest jQuery

  • modalbox_v1.0.min.css

  • modalbox.min.js

Initialization

Place "modalbox_v1.0.min.css" and latest jQuery above the end head tag and place "modalbox.min.js" above the end body tag.

<html>
  <head>
    <link rel="stylesheet" href="css/modalbox_v1.0.min.css" type="text/css"/>
    <script src="script/jquery-3.5.1.min.js" type="text/javascript"></script> <!-- Please update with latest jQuery -->
  </head>
  <body>
    <!-- Your page content -->
    <script src="script/modalbox.min.js" type="text/javascript"></script>
  </body>
</html>

Usage

Below code is sample for how to use it. Please see methods and its functionalities below sections.

<html>
<head>
    <link rel="stylesheet" href="css/modalbox_v1.0.min.css" type="text/css"/>
    <script src="script/jquery-3.5.1.min.js" type="text/javascript"></script> <!-- Please update with latest jQuery -->
</head>
<body>
    <div id="myDialog">
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
        Abcdefghijklmnopqrstuvwxyz Abcdefghijklmnopqrstuvwxyz
    </div>
    <button id="dialogop"> Click me[Movale,Not resizable]</button>
    <script src="script/modalbox.min.js" type="text/javascript"></script>
    <script>
        // Apply Modalbox to "#myDialog"
        $("#myDialog").myOwnDialog(
            {
                autoClose: false,
                width: "400",
                pos_y: "50",
                height: "300",
                bg_color: 'white',
                title: "This is movable but not resizable",
                body_margin: "10",
                body_overflow_x: "hidden",
                body_overflow_y: "scroll",
                movable: true,
                resizable: false,
                touchOutsideForClose: false
            });
        // Apply Modalbox trigger for "#myDialog" from "#dialogop" button
        $("#dialogop").click(function () {
            $("#myDialog").myOwnDialog("open");
        });
    </script>
</body>
</html>

Options

open

  • Type: String

To open modal box, please use open option.

    <script>
    //----------------  
        $("#dialogop").click(function () {
            $("#myDialog").myOwnDialog("open");
        });
    //----------------  
    </script>

close

  • Type: String

To close modal box, please use close option.

    <script>
    //----------------  
        $("#closeBtn").click(function () {
            $("#myDialog").myOwnDialog("close");
        });
    //----------------  
    </script>

Plugin parameters

autoClose

  • Type: Boolean|String
  • Default: false

You can set time delay in milliseconds (Ex: for 5 seconds, autoClose:"5000") to close Modal box. If you don't want auto close, simply set autoClose:false

width

  • Type: String
  • Default: "300"

You can set width of modalbox in pixel. Ex:. width:"500"

height

  • Type: String
  • Default: "200"

You can set height of modalbox in pixel. Ex:. height:"300"

pos_x

  • Type: String
  • Default: pos_x is automatically detected middle of screen in horizontal direction

Modal box is started with pos_x distance from left of browser window Ex:. pos_x:"150"

pos_y

  • Type: String
  • Default: pos_y is automatically detected middle of screen in veritical direction

Modal box is started with pos_y distance from top of browser window Ex:. pos_y:"50"

bg_color

  • Type: String
  • Default: "white"

You can change background color of modal box. Ex:. bg_color:"white" Or bg_color:"#ff8800"

title

  • Type: String
  • Default: title will be shown as empty

You can set title of modal box. Ex:. title:"This is modal box"

body_margin

  • Type: String
  • Default: "5"

This parameter is used for making margin(in pixel) on body of modal box and modal box window. Ex:. body_margin:"20"

body_overflow_x

  • Type: String
  • Default: "hidden"

This parameter is used for apply overflow on horizontal direction of body of modal box. This parameter is same as overflow-x property. Ex:. body_overflow_x:"hidden"

body_overflow_y

  • Type: String
  • Default: "hidden"

This parameter is used for apply overflow on veritical direction of body of modal box. This parameter is same as overflow-y property. Ex:. body_overflow_y:"hidden"

movable

  • Type: Boolean
  • Default: true

By this parameter, you can set modal box behaviour. If this option set to true, you can able to move modal box in any where in browser window. If this option set to false, modal box is fixed on that position. Ex:. movable:false

resizable

  • Type: Boolean
  • Default: true

You can resize modal box from all directions.(top,top-right,right,bottom-right,bottom,bottom-left,left,top-left) Ex:. resizable:false

touchOutsideForClose

  • Type: Boolean
  • Default: false

You can make modal to close when click on outside of the own modal box. Ex:. touchOutsideForClose:true

touchOutsideForClose

  • Type: Boolean
  • Default: false

You can make modal to close when click on outside of the own modal box. Ex:. touchOutsideForClose:true

beforeOpenCallback

  • Type: Boolean|function
  • Default: false

You can pass function for callback. It will trigger before modal box appear

afterOpenedCallback

  • Type: Boolean|function
  • Default: false

It will trigger after modal box appeared

beforeCloseCallback

  • Type: Boolean|function
  • Default: false

It will trigger before modal box close

afterClosedCallback

  • Type: Boolean|function
  • Default: false

It will trigger after modal box closed

Changelog

  • v1.2.1

    • Some minor issues fixed

  • v1.2

    • Code improvements
    • Some functionalities added
    • Some minor bugs fixed

  • v1.1

    • Code improvements and add some functionalities

  • v1.0

    • New release

Contribution

Thank you jQueryScript.Net for publishing this jQuery plugin into your website I did not submit this plugin from our end on your website. I have seen Draggable And Resizable Modal Popup - myOwnDialog.js page in your site. Thank you again for this. It will help me to create more jQuery plugins.

About

Modal box - jQuery - Simple and very effective modal box

siva7170.github.io/myOwnDialog/modal.html

Topics

javascript jquery jquery-plugin modal jquery-modal modalbox most-customizable-jquery-modal

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases 4

Modal box v1.2.1 Latest
Aug 4, 2020
+ 3 releases

Packages

No packages published

Languages