JarCasting
JarCasting JarCasting

bootstrap-modal-fullscreen

WebJar for bootstrap-modal-fullscreen

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-benallfree-bootstrap-fullscreen-modal
Last Version

Last Version

1.1.1
Release Date

Release Date
Type

Type

jar
Description

Description

bootstrap-modal-fullscreen
WebJar for bootstrap-modal-fullscreen
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/benallfree/bootstrap-fullscreen-modal

Download github-com-benallfree-bootstrap-fullscreen-modal

Filename Size
github-com-benallfree-bootstrap-fullscreen-modal-1.1.1.pom
github-com-benallfree-bootstrap-fullscreen-modal-1.1.1.jar 8 KB
github-com-benallfree-bootstrap-fullscreen-modal-1.1.1-sources.jar 22 bytes
github-com-benallfree-bootstrap-fullscreen-modal-1.1.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-benallfree-bootstrap-fullscreen-modal/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-benallfree-bootstrap-fullscreen-modal</artifactId>
    <version>1.1.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-benallfree-bootstrap-fullscreen-modal/
implementation 'org.webjars.npm:github-com-benallfree-bootstrap-fullscreen-modal:1.1.1'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-benallfree-bootstrap-fullscreen-modal/
implementation ("org.webjars.npm:github-com-benallfree-bootstrap-fullscreen-modal:1.1.1")
'org.webjars.npm:github-com-benallfree-bootstrap-fullscreen-modal:jar:1.1.1'
<dependency org="org.webjars.npm" name="github-com-benallfree-bootstrap-fullscreen-modal" rev="1.1.1">
  <artifact name="github-com-benallfree-bootstrap-fullscreen-modal" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-benallfree-bootstrap-fullscreen-modal', version='1.1.1')
)
libraryDependencies += "org.webjars.npm" % "github-com-benallfree-bootstrap-fullscreen-modal" % "1.1.1"
[org.webjars.npm/github-com-benallfree-bootstrap-fullscreen-modal "1.1.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Full Screen Modal Dialogs for Bootstrap

Ever wanted that modal dialog to take up the whole screen? This plugin does it. It even supports a scrollable body region so your modal footer stays where you expect it to.

Features:

  • Full screen modal dialog
  • Scrollable body region
  • Resizes with window

Quickstart

See the Codepen demo.

npm require --save-dev bootstrap-modal-fullscreen

This plugin requires Bootstrap 3 or 4 and jQuery

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.js"></script>

Then:

<script src="https://cdn.jsdelivr.net/bootstrap-modal-fullscreen/1.0.3/bootstrap-modal-fullscreen.min.js"></script>

Usage

In most cases, you need only add .modal-fullscreen to your modal dialog:

<div class="modal fade modal-fullscreen" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Some great content
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

For special cases, you may need to enable full screen viewing programatically. In that case, add .modal-fullscreen to your dialog as usual, then call:

$('#myModal').fullscreen();

Building

gulp

Versions

Version
1.1.1