Simplemodal of jquery Plugins

Source: Internet
Author: User

1. Simplemodal defines the following CSS classes internally

simplemodal-Overlay: Matte simplemodal-container: pop-up container simplemodal-wrapsimplemodal-data

2. Close the window

Simplemodal automatically binds the close function to the element in the popup window that is "Simplemodal-close". Therefore, you can turn off the function as long as you add this class.

You can also call $.modal.close () to close the open pop-up window.

If you do not want to use the plug-in class name is called the Shutdown function class, you can customize the method as follows:

$.modal.defaults.closeclass = "Modalclose";

Of course, if you want to modify more than one default parameter, you can use the following code:

$.extend ($.modal.defaults,{closeclass:"Modalclose", closehtml:"<a href= ' # ' >close</a > "});

3. Now look at its custom options:
AppendTo: Adds a popup to the parent container, with the parameter CSS Selector
Opacity: Transparency
Overlayid: Mask Layer ID
Overlaycss: {Object} defines mask layer style
Containerid: Pop-up form container ID
CONTAINERCSS: Defining the style of a container
Dataid: Content Layer ID
CONTAINERCSS: Style of the content layer
MinHeight: Min. height
MinWidth: Min. width
MaxHeight: Max height maxwidth: Max width
AutoResize: Adaptive size
ZIndex: Z-index of the pop-up layer
Close: whether to allow closing
Closehtml: Custom Close button
Closeclass: Turn off layer style
Overlayclose: Click the Mask layer to close the pop-up form
Position: Array [Top, left] custom popup form position
OnOpen: callback function when pop-up form opens
OnShow: callback function when popup form is displayed
OnClose: callback function when popup form is closed

Options

The following is a list of current options. Default values is indicated with: [Type:value]

    • appendTo[String: ' Body ']
      The jQuery selector to append the elements to. For ASP, use ' form '.
    • focus[Boolean:true] (Changed in 1.4)
      Focus in the first visible, enabled element?
    • opacity[NUMBER:50]
      The opacity value for the overlay div, from 0-100
    • overlayId[String: ' Simplemodal-overlay ']
      The DOM element ID for the overlay div
    • overlayCss[object:{}]
      The CSS styling for the overlay div
    • containerId[String: ' Simplemodal-container ']
      The DOM element ID for the container div
    • containerCss[object:{}]
      The CSS styling for the container div
    • dataId[String: ' Simplemodal-data ']
      The DOM element ID for the data div
    • dataCss[object:{}]
      The CSS styling for the data div
    • minHeight[Number:null]
      The minimum height for the container
    • minWidth[Number:null]
      The minimum width for the container
    • maxHeight[Number:null]
      The maximum height for the container. If not specified, the window height is used.
    • maxWidth[Number:null]
      The maximum width for the container. If not specified, the window width is used.
    • autoResize[Boolean:false] (Changed in 1.4)
      Resize the container if it exceeds the browser window dimensions?
    • autoPosition[Boolean:true] (Changed in 1.4)
      Automatically position the container upon creation and on window resize?
    • zIndex[number:1000]
      Starting Z-index Value
    • close[Boolean:true]
      If true, closeHTML and would be escClose overClose used if set. If false, none of them would be used.
    • closeHTML[String: ']
      The HTML for the default close link. Simplemodal'll automatically add the Closeclass to this element.
    • closeClass[String: ' Simplemodal-close ']
      The CSS class used to bind to the Close event
    • escClose[Boolean:true]
      Allow ESC keypress to close the dialog?
    • overlayClose[Boolean:false]
      Allow click on overlay to close the dialog?
    • position[Array:null]
      Position of container [top, left]. Can be number of pixels or percentage
    • persist[Boolean:false]
      Persist the data across modal calls? Only used for existing DOM elements. If true, the data would be maintained across modal calls, if false, the data would be reverted to its original state.
    • modal[Boolean:true] (Added in 1.3.4. Name changed from in transient 1.3.5))
      User'll is unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, IFRAME, and certain events would be disabled allowing the user to interact with the page below the D Ialog.
    • onOpen[Function:null]
      The callback function used in place of Simplemodal ' s Open
    • onShow[Function:null]
      The callback function used after the modal dialog have opened
    • onClose[Function:null]
      The callback function used in place of Simplemodal ' s close

JQuery Plugin Simplemodal

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.