Skip to content

Instantly share code, notes, and snippets.

@ricardozea

ricardozea/css

Last active March 21, 2019 22:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ricardozea/2d2fea9c9138b8ead080cb3951796e27 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ricardozea/2d2fea9c9138b8ead080cb3951796e27 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ricardozea revised this gist Mar 21, 2019. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions jQuery
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    //Variables
    var trigger = $(".trigger");
    var flyout = $(".flyout");
    var close = $(".btn-close");
    var flyout = $(".flyout");
    var close = $(".btn-close");

    //Fade in/out the flyout when clicking on the trigger
    $(trigger).on("click", function(e) {
  2. ricardozea revised this gist Mar 21, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion jQuery
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ $(trigger).on("click", function(e) {

    //Fade out the flyout when clicking on the Close button
    $(close).on("click", function(e){
    $(flyout).fadeToggle("fast");
    $(flyout).fadeToggle("fast");
    e.stopPropagation();
    });

  3. ricardozea revised this gist Mar 21, 2019. No changes.
  4. ricardozea created this gist Mar 21, 2019.
    25 changes: 25 additions & 0 deletions css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    .flyout {
    display: none;
    width: 200px;
    height: 200px;
    margin: 1em;
    padding: 20px;
    position: relative;
    background: #ccc;
    }

    .btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    }


    /* Styles not needed for demo */
    html { box-sizing: border-box; }
    *, *:before, *:after { box-sizing: inherit; }
    body {
    margin: 20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    a {}
    2 changes: 2 additions & 0 deletions html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <a href="#" class="trigger">Open</a>
    <div class="flyout">Lorem ipsum <a href="#" class="btn-close">[×]</a></div>
    30 changes: 30 additions & 0 deletions jQuery
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    //Variables
    var trigger = $(".trigger");
    var flyout = $(".flyout");
    var close = $(".btn-close");

    //Fade in/out the flyout when clicking on the trigger
    $(trigger).on("click", function(e) {
    $(flyout).fadeToggle("fast");
    e.stopPropagation();
    });

    //Fade out the flyout when clicking on the Close button
    $(close).on("click", function(e){
    $(flyout).fadeToggle("fast");
    e.stopPropagation();
    });

    //Fade out the flyout when clicking anywhere on the page
    $(document).on("click", function(e) {
    if ($(e.target).closest(flyout).length === 0) {
    $(flyout).fadeOut("fast");
    }
    });

    //Fade out the flyout when pressing the ESC key
    $(document).on("keydown", function(e) {
    if (e.keyCode === 27) {
    $(flyout).fadeOut("fast");
    }
    });