Execute
Save
Share
Share link
share
share
share
Team
Public Teams
Comments
0
Created By:
Guest
Title:
Bootsrap Model Plugin Callback
Title
Description
Edit
Copy Link
Login
Email *
Password *
Login
OR
Create Account
Screen Name *
Email *
Password *
Retype Password *
Team Access Code
Register
Public CodeBins
HELP
--Select Theme--
Ambiance
Blackboard
Cobalt
Eclipse
Elegant
Erlang-Dark
Lesser-Dark
Monokai
Neat
Night
Rubyblue
Vibrant-Ink
Xq-Dark
New CodeBin
CodeBins Versions
Bootsrap Model - V.4
Bootsrap Model - V.3
Bootsrap Model - V.2
Bootsrap Model - V.1
Compare Versions
Recent CodeBins
View All CodeBins
$(function() { var bsModalWindow = '<div class="modal hidden fade" id="myModal">'; bsModalWindow += '<div class="modal-header">'; bsModalWindow += '<button type="button" class="close" data-dismiss="modal">dismiss</button>'; bsModalWindow += '<h3>Modal header</h3>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-body">'; bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>'; bsModalWindow += '</div>'; bsModalWindow += '<div class="modal-footer">'; bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>'; bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>'; bsModalWindow += '</div>'; bsModalWindow += '</div>'; $(".divbutton").before(bsModalWindow); $(".bsModal").click(function() { $("#myModal").on('show', function() { $("#myModal").css('top', '100%'); alert('Modal will be shown'); }).on('shown', function() { console.log('Modal was shown'); }).on('hide', function() { console.log('Modal will be hidden'); }).on('hidden', function() { console.log('Modal is hidden'); }).show({ backdrop: true, keyboard: true }); $("#myModal").modal('show'); }); });
Bottom of Page
In Head
On Load
On Ready
Setting
Validate
Copy
Format
Setting
Validate
Copy
Format
<div id="panel"> <div class="divbutton"> <a href="#myModal" class="btn btn-primary btn-large bsModal"> Launch Demo Modal </a> </div> </div>
No Doc Type
HTML5
HTML 4.01 Transitional
HTML 4.01 Strict
HTML 4.01 Frameset
XHTML 1.1
XHTML 1.0 Transitional
XHTML 1.0 Strict
XHTML 1.0 Frameset
Copy
Format
Download
×
Code Description
×
Difference of Versions
HTML
CSS
JS
×
JS Error
×
CSS Error
Errors
Warnings
×
JavaScript Setting
JS Libraries:
Chrome Frame 1.0.3
Dojo 1.8.0
Dojo 1.7.3
Dojo 1.7.2
Ext Core 3.1.0
jQuery 1.8.0
jQuery 1.7.2
jQuery 1.6.0
jQuery 1.5.0
jQuery 1.4.4
jQuery 1.4.0
jQuery-min 1.7.2
jQueryUI-min 1.8.21
MooTools more-1.4.0.1-full
MooTools core-1.4.5-full
MooTools core-1.4.1-full
Prototype 1.7.1.0
script.aculo.us 1.9.0
SWFObject 2.2
Twitter Bootstrap 2.0.4
WebFont Loader 1.0.28
yui 3.5.1
User Libraries:
Upload File
JavaScript URL(s):
×
CSS Setting
CSS Libraries:
jQueryUI 1.8.21
Twitter Bootstrap 2.0.4
User Libraries:
Upload File
CSS URL(s):