Меню

Semantic ui modal как подключить

Modal

A modal displays content that temporarily blocks interactions with the main view of a site

UI Framework

Standalone

Package Managers

Package Managers

We have more to share with you. Follow us along to modal 2

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

Are you sure you want to delete your account

Give us your feedback

Do you want to change that thing to something else?

This is an example of expanded content that will cause the modal’s dimmer to scroll

We’ve grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Types

Standard

We’ve grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Basic

A modal can reduce its complexity

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

Variations

Full Screen

A modal can use the entire size of the screen

A modal can vary in size

States

Active

An active modal is visible on the page

Examples

Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

Multiple Modals

A modal can open a second modal. If you use allowMultiple: true parameter the second modal will be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.

Forcing a Choice

You can disable a modal’s dimmer from being closed by click to force a user to make a choice

Approve / Deny Callbacks

Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.

Transitions

A modal can use any named ui transition.

Attach events

A modal can attach events to another element

Usage

Initializing a modal

A modal can be included anywhere on the page. On initialization a modal’s current size will be cached, and the element will be detached from the dom and moved inside a dimmer.

Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal’s content.

If you need to have your modal stay in its current location you can preserve its position using the setting detachable: false

Behavior

All the following behaviors can be called using the syntax:

Behavior Description
show Shows the modal
hide Hides the modal
toggle Toggles the modal
refresh Refreshes centering of modal on page
show dimmer Shows associated page dimmer
hide dimmer Hides associated page dimmer
hide others Hides all modals not selected modal in a dimmer
hide all Hides all visible modals in the same dimmer
cache sizes Caches current modal size
can fit Returns whether the modal can fit on the page
is active Returns whether the modal is active
set active Sets modal to active

Settings

Modal Settings

Setting Default Description
detachable true If set to false will prevent the modal from being moved to inside the dimmer
autofocus true When true, the first form input inside the modal will receive focus when shown. Set this to false to prevent this behavior.
allowMultiple false If set to true will not close other visible modals when opening a new one
offset A vertical offset to allow for content outside of modal, for example a close button, to be centered.
context body Selector or jquery object specifying the area to dim
closable true Setting to false will not allow you to close the modal by clicking on the dimmer
dimmerSettings You can specify custom settings to extend UI dimmer
useCSS true Whether to use CSS animations instead of fallback javascript animations
transition scale Named transition to use when animating menu in and out. Fade is available without including ui transitions
duration 400 Duration of animation
queue false Whether additional animations should queue
easing easeOutExpo Animation easing is only used if javascript animations are used.

Callbacks

Setting Context Description
onShow Modal Is called when a modal starts to show.
onVisible Modal Is called after a modal has finished showing animating.
onHide Modal Is called after a modal starts to hide.
onHidden Modal Is called after a modal has finished hiding animation.
onApprove Modal Is called after a positive, approve or ok button is pressed
onDeny Modal Is called after a negative, deny or cancel button is pressed.

DOM Settings

Debug Settings

Setting Default Description
namespace modal Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector

Help Make Semantic UI Better

Maintaining an open source UI library is no small task. Support for the continued development of Semantic UI comes directly from the community.

Источник

Modal

UI Framework

Standalone

Package Managers

Package Managers

We have more to share with you. Follow us along to modal 2

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

Are you sure you want to delete your account

Are you sure you want to delete your account

Are you sure you want to delete your account

Give us your feedback

Do you want to change that thing to something else?

This is an example of expanded content that will cause the modal’s dimmer to scroll

This is an example of expanded content that will cause the modal’s dimmer to scroll

We’ve found the following gravatar image associated with your e-mail address.

Is it okay to use this photo?

We’ve found the following gravatar image associated with your e-mail address.

Is it okay to use this photo?

Types

Modal

We’ve grabbed the following image from the gravatar image associated with your registered e-mail address.

Is it okay to use this photo?

Basic

A modal can reduce its complexity

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

Content

Header

A modal can have a header

Content

A modal can contain content

Image Content New in 2.0

A modal can contain image content

Actions

A modal can contain a row of actions

Close actions are applied by default to all button actions, in addition an onApprove or onDeny callback will fire if the elements match either selector.

To prevent a modal action from causing the modal to close, you can return false; from either callback.

Variations

Full Screen

A modal can use the entire size of the screen

A modal can vary in size

Scrolling Content

A modal can use the entire size of the screen

Very long content goes here

States

Active

An active modal is visible on the page

Examples

Disabling Vertical Centering

When your modal has dynamic content, or multiple steps, it can make sense to disable centering so content doesn’t jump around vertically when its height changes.

Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

Internally Scrolling Content

You may prefer to have the content of your modal scroll itself, you can do this by using the scrolling content variation.

Multiple Modals

A modal can open a second modal. If you use allowMultiple: true parameter the second modal will be opened on top of the first modal. Otherwise the modal will be closed before the second modal is opened.

Forcing a Choice

You can disable a modal’s dimmer from being closed by click to force a user to make a choice

Approve / Deny Callbacks

Modals will automatically tie approve deny callbacks to any positive/approve, negative/deny or ok/cancel buttons.

Attach events

A modal can attach events to another element

Transitions

A modal can use any named ui transition.

Dimmer Variations

Modals can specify additional variations like blurring or inverted which adjust how the dimmer displays.

Usage

Initializing a modal

A modal can be included anywhere on the page. On initialization a modal’s current size will be cached, and the element will be detached from the DOM and moved inside a dimmer.

Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal’s content.

If you need to have your modal stay in its current location you can preserve its position using the setting detachable: false

Behavior

All the following behaviors can be called using the syntax:

Источник

Semantic ui modal как подключить

GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

GitHub is where the world builds software

Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A package for creating Semantic Modals, designed to play nice with Meteor.

NOTE: THIS WILL ALSO ADD THE ENTIRE SEMANTIC-UI PACKAGE, WHICH IS PRETTY CHUNKY! I might release a future version with only the relevant css and js for the modal, but for the time being, this is designed for people who are using Semantic-UI for the rest of their app.

Allows the user to create Semantic-UI modals on the fly from Javascript code. For example:

The package will add an object called SemanticModal to the global namespace. It has two methods:

This will render a simple modal with header, body and either «Okay» and «Cancel» buttons, or no buttons at all. It is designed as a convenience method.

Note that if the modal is closed by clicking «Cancel», no further action will be taken.

generalModal(template, data, options)

This will render the supplied template in a new modal, with the data context provided. Note that although the template will be reactive with respect to any registered helpers, it will not be reactive with respect to the data context. This is a consequence of the way UI.renderWithData works at present.

Events should be handled by registering handlers using the usual Template.xxx.events API for the template that’s going to be passed to the generalModal method.

There is a demo running at semantic-ui-modal-demo.meteor.com, with the source available here.

Please feel free to raise an issue if you encounter problems or you’d like to suggest a feature.

Источник

Читайте также:  Как автоматически подключить сетевой диск
Adblock
detector
Setting Default Description
name Modal Name used in debug logs
debug False Provides standard debug output to console
performance True Provides standard debug output to console
verbose True Provides ancillary debug output to console
error