Skip to content

Instantly share code, notes, and snippets.

@nayosx

nayosx/modal-fullscreen.css

Forked from soham2008xyz/modal-fullscreen.css
Created April 19, 2018 21:58
Show Gist options
  • Save nayosx/dff3b38103aed9fe2351a7de1bb8f3bb to your computer and use it in GitHub Desktop.
Save nayosx/dff3b38103aed9fe2351a7de1bb8f3bb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @soham2008xyz soham2008xyz revised this gist Feb 3, 2017. 2 changed files with 45 additions and 0 deletions.
    22 changes: 22 additions & 0 deletions modal-fullscreen.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    <!-- Button modal fullscreen -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-fullscreen">
    Launch modal fullscreen
    </button>

    <!-- Modal fullscreen -->
    <div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
    23 changes: 23 additions & 0 deletions modal-transparent.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@

    <!-- Button modal transparent -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-transparent">
    Launch modal transparent
    </button>

    <!-- Modal transparent -->
    <div class="modal modal-transparent fade" id="modal-transparent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
  2. @soham2008xyz soham2008xyz created this gist Feb 3, 2017.
    39 changes: 39 additions & 0 deletions modal-fullscreen.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    /* .modal-fullscreen */
    .modal-fullscreen {
    background: transparent;
    }
    .modal-fullscreen .modal-content {
    background: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    .modal-backdrop.modal-backdrop-fullscreen {
    background: #ffffff;
    }
    .modal-backdrop.modal-backdrop-fullscreen.in {
    opacity: .97;
    filter: alpha(opacity=97);
    }
    /* .modal-fullscreen size: we use Bootstrap media query breakpoints */
    .modal-fullscreen .modal-dialog {
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    }
    @media (min-width: 768px) {
    .modal-fullscreen .modal-dialog {
    width: 750px;
    }
    }
    @media (min-width: 992px) {
    .modal-fullscreen .modal-dialog {
    width: 970px;
    }
    }
    @media (min-width: 1200px) {
    .modal-fullscreen .modal-dialog {
    width: 1170px;
    }
    }
    9 changes: 9 additions & 0 deletions modal-fullscreen.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    // .modal-backdrop classes
    $(".modal-fullscreen").on('show.bs.modal', function () {
    setTimeout( function() {
    $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
    }, 0);
    });
    $(".modal-fullscreen").on('hidden.bs.modal', function () {
    $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
    });
    14 changes: 14 additions & 0 deletions modal-transparent.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    /* .modal-transparent */
    .modal-transparent {
    background: transparent;
    }
    .modal-transparent .modal-content {
    background: transparent;
    }
    .modal-backdrop.modal-backdrop-transparent {
    background: #ffffff;
    }
    .modal-backdrop.modal-backdrop-transparent.in {
    opacity: .9;
    filter: alpha(opacity=90);
    }
    9 changes: 9 additions & 0 deletions modal-transparent.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    // .modal-backdrop classes
    $(".modal-transparent").on('show.bs.modal', function () {
    setTimeout( function() {
    $(".modal-backdrop").addClass("modal-backdrop-transparent");
    }, 0);
    });
    $(".modal-transparent").on('hidden.bs.modal', function () {
    $(".modal-backdrop").addClass("modal-backdrop-transparent");
    });