Modal.md 38 KB
<!DOCTYPE html>
<meta charset="utf-8">
<meta content="https://avatars2.githubusercontent.com/u/12846955?v=3&s=400" property="og:image" /><meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="Coffcer/vue-bootstrap-modal" property="og:title" /><meta content="https://github.com/Coffcer/vue-bootstrap-modal" property="og:url" /><meta content="vue-bootstrap-modal - Bootstrap style modal for vue" property="og:description" />
<meta name="google-analytics" content="UA-3769691-2">
<meta name="hostname" content="github.com">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="NDJiNDZjYmQxNTE2MDM4YzZmZGMwZWFlYmM4NzZmM2FiOTJkOTA4ODYwYjY3ODliYTQzNGE4ZTljMDVmNTJhNHx7InJlbW90ZV9hZGRyZXNzIjoiNDUuNzYuMjAzLjExMCIsInJlcXVlc3RfaWQiOiJBREI3OjI4NEFEOjEzNEVCRjoyMEFDNzU6NThEMEYxNkYiLCJ0aW1lc3RhbXAiOjE0OTAwODgzMDMsImhvc3QiOiJnaXRodWIuY29tIn0=">
<link href="https://github.com/Coffcer/vue-bootstrap-modal/commits/master.atom" rel="alternate" title="Recent Commits to vue-bootstrap-modal:master" type="application/atom+xml">
<link rel="canonical" href="https://github.com/Coffcer/vue-bootstrap-modal/blob/master/README.md" data-pjax-transient>
<a href="#start-of-content" tabindex="1" class="accessibility-aid js-skip-to-content">Skip to content</a>
<div id="js-pjax-loader-bar" class="pjax-loader-bar"><div class="progress"></div></div>
<header class="site-header js-details-container Details" role="banner">
<a class="header-logo-invertocat" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<button class="btn-link float-right site-header-toggle js-details-target" type="button" aria-label="Toggle navigation">
<svg aria-hidden="true" class="octicon octicon-three-bars" height="24" version="1.1" viewBox="0 0 12 16" width="18"><path fill-rule="evenodd" d="M11.41 9H.59C0 9 0 8.59 0 8c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zm0-4H.59C0 5 0 4.59 0 4c0-.59 0-1 .59-1H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1h.01zM.59 11H11.4c.59 0 .59.41.59 1 0 .59 0 1-.59 1H.59C0 13 0 12.59 0 12c0-.59 0-1 .59-1z"/></svg>
</button>
<div class="site-header-menu">
<nav class="site-header-nav">
<a href="/features" class="js-selected-navigation-item nav-item" data-ga-click="Header, click, Nav menu - item:features" data-selected-links="/features /features">
Features
Explore
Pricing
<div class="site-header-actions">
<div class="header-search scoped-search site-scoped-search js-site-search" role="search">
<label class="form-control header-search-wrapper js-chromeless-input-container">
<div class="header-search-scope">This repository</div>
<input type="text"
class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
data-hotkey="s"
name="q"
placeholder="Search"
aria-label="Search this repository"
data-unscoped-placeholder="Search GitHub"
data-scoped-placeholder="Search"
autocapitalize="off">
</label>
<a class="text-bold site-header-link" href="/login?return_to=%2FCoffcer%2Fvue-bootstrap-modal%2Fblob%2Fmaster%2FREADME.md" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
<span class="text-gray">or</span>
<a class="text-bold site-header-link" href="/join?source=header-repo" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
</div>
</div>
<div id="js-flash-container">
<div itemscope itemtype="http://schema.org/SoftwareSourceCode">
<div id="js-repo-pjax-container" data-pjax-container>
Permalink
Branch:
master
Switch branches/tags
<div class="select-menu-filters">
<div class="select-menu-text-filter">
<input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
</div>
<div class="select-menu-tabs">
<ul>
<li class="select-menu-tab">
<a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
</li>
<li class="select-menu-tab">
<a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
</li>
</ul>
</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
<a class="select-menu-item js-navigation-item js-navigation-open selected"
href="/Coffcer/vue-bootstrap-modal/blob/master/README.md"
data-name="master"
data-skip-pjax="true"
rel="nofollow">
<svg aria-hidden="true" class="octicon octicon-check select-menu-item-icon" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
<span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
master
</span>
</a>
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
</div>
<a href="/Coffcer/vue-bootstrap-modal/find/master"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<button aria-label="Copy file path to clipboard" class="js-zeroclipboard btn btn-sm BtnGroup-item tooltipped tooltipped-s" data-copied-hint="Copied!" type="button">Copy path</button>
<span class="repo-root js-repo-root"><span class="js-path-segment"><a href="/Coffcer/vue-bootstrap-modal"><span>vue-bootstrap-modal</span></a></span></span><span class="separator">/</span><strong class="final-path">README.md</strong>
<span class="float-right">
<a class="commit-tease-sha" href="/Coffcer/vue-bootstrap-modal/commit/3c0167a59f4697b1493d244ff474afd0c6edb7b5" data-pjax>
3c0167a
</a>
<relative-time datetime="2016-03-18T11:39:38Z">Mar 18, 2016</relative-time>
</span>
<div>
<img alt="@Coffcer" class="avatar" height="20" src="https://avatars0.githubusercontent.com/u/12846955?v=3&s=40" width="20" />
<a href="/Coffcer" class="user-mention" rel="author">Coffcer</a>
<a href="/Coffcer/vue-bootstrap-modal/commit/3c0167a59f4697b1493d244ff474afd0c6edb7b5" class="message" data-pjax="true" title="update">update</a>
</div>
<div class="commit-tease-contributors">
<button type="button" class="btn-link muted-link contributors-toggle" data-facebox="#blob_contributors_box">
<strong>1</strong>
contributor
</button>
</div>
<div id="blob_contributors_box" style="display:none">
<h2 class="facebox-header" data-facebox-id="facebox-header">Users who have contributed to this file</h2>
<ul class="facebox-user-list" data-facebox-id="facebox-description">
<li class="facebox-user-list-item">
<img alt="@Coffcer" height="24" src="https://avatars2.githubusercontent.com/u/12846955?v=3&s=48" width="24" />
<a href="/Coffcer">Coffcer</a>
</li>
</ul>
</div>
<a class="btn-octicon tooltipped tooltipped-nw"
href="https://windows.github.com"
aria-label="Open this file in GitHub Desktop"
data-ga-click="Repository, open with desktop, type:windows">
<svg aria-hidden="true" class="octicon octicon-device-desktop" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
</a>
<button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg aria-hidden="true" class="octicon octicon-pencil" height="16" version="1.1" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
</button>
<button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg aria-hidden="true" class="octicon octicon-trashcan" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
</button>
100 lines (89 sloc)
<span class="file-info-divider"></span>
1.97 KB
<article class="markdown-body entry-content" itemprop="text"><h1><a id="user-content-vue-bootstrap-modal" class="anchor" href="#vue-bootstrap-modal" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>vue-bootstrap-modal</h1>
Bootstrap style modal component for vue.
Usage
import Bootstrap.css
<link href="bootstrap.css"></link>
NOTE: By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
simple options:
<!--text content--> <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">Modal Text</modal>
<!--custom content--> <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel">
<<span class="pl-ent">div</span>>Modal Body</<span class="pl-ent">div</span>> <<span class="pl-ent">div</span> <span class="pl-e">slot</span>=<span class="pl-s"><span class="pl-pds">"</span>header<span class="pl-pds">"</span></span>>Modal Header</<span class="pl-ent">div</span>> <<span class="pl-ent">div</span> <span class="pl-e">slot</span>=<span class="pl-s"><span class="pl-pds">"</span>title<span class="pl-pds">"</span></span>>Modal Title</<span class="pl-ent">div</span>> <<span class="pl-ent">div</span> <span class="pl-e">slot</span>=<span class="pl-s"><span class="pl-pds">"</span>footer<span class="pl-pds">"</span></span>>Modal Footer</<span class="pl-ent">div</span>></modal>
#Props
props: {show<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, twoWay<span class="pl-k">:</span> <span class="pl-c1">true</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }, title<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Modal<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> Bootstrap small style modal</span> small<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }, <span class="pl-c"><span class="pl-c">//</span> Bootstrap large style modal</span> large<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }, <span class="pl-c"><span class="pl-c">//</span> Bootstrap full style modal </span> full<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }, <span class="pl-c"><span class="pl-c">//</span> if it set false, click background will close modal </span> force<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }, <span class="pl-c"><span class="pl-c">//</span> vue transition name</span> transition<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>modal<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> [OK button] text</span> okText<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>OK<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> [Cancel button] text</span> cancelText<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Cancel<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> [OK button] className</span> okClass<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>btn blue<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> [Cancel button] className</span> cancelClass<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">String</span>, default<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>btn red btn-outline<span class="pl-pds">'</span></span> }, <span class="pl-c"><span class="pl-c">//</span> automatically close when click [OK button]</span> closeWhenOK<span class="pl-k">:</span> { type<span class="pl-k">:</span> <span class="pl-c1">Boolean</span>, default<span class="pl-k">:</span> <span class="pl-c1">false</span> }}
License
MIT
Jump to Line
<input class="form-control linejump-input js-jump-to-line-field" type="text" placeholder="Jump to line…" aria-label="Jump to line" autofocus>
<button type="submit" class="btn">Go</button>
</div>
<div class="container site-footer-container">
<ul class="site-footer-links float-right">
<li><a href="https://github.com/contact" data-ga-click="Footer, go to contact, text:contact">Contact GitHub</a></li>
<li><a href="https://developer.github.com" data-ga-click="Footer, go to api, text:api">API</a></li>
<li><a href="https://training.github.com" data-ga-click="Footer, go to training, text:training">Training</a></li>
<li><a href="https://shop.github.com" data-ga-click="Footer, go to shop, text:shop">Shop</a></li>
<li><a href="https://github.com/blog" data-ga-click="Footer, go to blog, text:blog">Blog</a></li>
<li><a href="https://github.com/about" data-ga-click="Footer, go to about, text:about">About</a></li>
</ul>
<a href="https://github.com" aria-label="Homepage" class="site-footer-mark" title="GitHub">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
<ul class="site-footer-links">
<li>© 2017 <span title="0.05917s from github-fe-bd32a9f.cp1-iad.github.net">GitHub</span>, Inc.</li>
<li><a href="https://github.com/site/terms" data-ga-click="Footer, go to terms, text:terms">Terms</a></li>
<li><a href="https://github.com/site/privacy" data-ga-click="Footer, go to privacy, text:privacy">Privacy</a></li>
<li><a href="https://github.com/security" data-ga-click="Footer, go to security, text:security">Security</a></li>
<li><a href="https://status.github.com/" data-ga-click="Footer, go to status, text:status">Status</a></li>
<li><a href="https://help.github.com" data-ga-click="Footer, go to help, text:help">Help</a></li>
</ul>
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
<button type="button" class="flash-close js-flash-close js-ajax-error-dismiss" aria-label="Dismiss error">
<svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
</button>
You can't perform that action at this time.
<script crossorigin="anonymous" integrity="sha256-9ZVgaDj6gInYIAHGtNp/a6M/Md3kgGXgA5AUO5DatkI=" src="https://assets-cdn.github.com/assets/frameworks-f595606838fa8089d82001c6b4da7f6ba33f31dde48065e00390143b90dab642.js"></script>
<script async="async" crossorigin="anonymous" integrity="sha256-/9HdxwBKwBbzfRDYr5x0VA/AwmjrRjr+roYI6ZnMWuE=" src="https://assets-cdn.github.com/assets/github-ffd1ddc7004ac016f37d10d8af9c74540fc0c268eb463afeae8608e999cc5ae1.js"></script>
<svg aria-hidden="true" class="octicon octicon-alert" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M8.865 1.52c-.18-.31-.51-.5-.87-.5s-.69.19-.87.5L.275 13.5c-.18.31-.18.69 0 1 .19.31.52.5.87.5h13.7c.36 0 .69-.19.86-.5.17-.31.18-.69.01-1L8.865 1.52zM8.995 13h-2v-2h2v2zm0-3h-2V6h2v4z"/></svg>
<span class="signed-in-tab-flash">You signed in with another tab or window. <a href="">Reload</a> to refresh your session.</span>
<span class="signed-out-tab-flash">You signed out in another tab or window. <a href="">Reload</a> to refresh your session.</span>
<div class="facebox-content" role="dialog" aria-labelledby="facebox-header" aria-describedby="facebox-description">
</div>
<button type="button" class="facebox-close js-facebox-close" aria-label="Close modal">
<svg aria-hidden="true" class="octicon octicon-x" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
</button>