ByeBox

An animated approach to dismissable inline content

Download the latest version

View the GitHub Page

Also available, you can download this preview page

Code and Usage

Besides byebox.css and byebox.js, the only other thing you'll need is some form of jQuery.

ByeBox

I'm ready to jump!
Click here to dismiss me

ByeBox

I'm ready to jump!
Click here to replace me
<div class="bye-box-container">
	<div class="bye-box-content-container">
		<div class="bye-box-bg"></div>
		<div class="bye-box-content"
				style="text-align:center; border:1px dashed; padding:0 1rem 1rem">
			<h3> ByeBox </h3>
			<div>I'm ready to jump!</div> 
			<div>Click <a href="#" class="bye-button">here</a> to dismiss me</div>
		</div>
	</div>
</div>

.bye-box-container

Parent container for the ByeBox

.bye-box-content-container

Container for the bg and main content

.bye-box-bg

Contains the background for the content. This can be retrieved when new content is added.

.bye-box-content

Contains the html content to be dismissed.

.bye-button

Clickable element to dismiss the content.

Preview

Dismissable content can be inline-block, block, floated, whatever. The container is element agnostic, so if you need to use pure spans (for the sake of not breaking the <p> element with a block element), go for it! Style and override the defaults freely. Apply a background color to the .bye-box-container for background-color agnostic capabilities.

Applied to bootstrap columns:

ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
Bootstrap Card I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!

Check it out, this whole bar can be dismissed

Yeahhh, Nestable indeed.

ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
Bootstrap Card I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
Bootstrap Card I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!
Bootstrap Card I'm ready to jump!
ByeBox I'm ready to jump!
ByeBox I'm ready to jump!

Applied to floated items, sized with bootstrap columns, and in pure spans:

Trek-Ipsum

this zoo somehow and at them on the voyage mister la forge prepare reports of the entire beetle. i was created an exception for talos four in their behaviour on the flagship of this ship and talk to you had wanted you that there anymore please riva is in his condition but we've had some doubt that long for a radio beam to travel from the lack of traceable. ByeBox I'm ready to jump! you wanted to see me when i'm afraid your imagination nor. moogie i'm sorry commander data has learned to tie. i can count on every moment of the fca's involved now you're saying goodbye lore is only feeding him and the talos four all these years i'd see how their lives life as it happens to him and who's going on ohniaka three consisting. you captain kirk to all ship is gone insane fears.

get intend to take you all for a radio beam to travel from there to move my first emotion data you must save spock's life signs in any trouble when i saw the nagus all you have a conscience is too risky and which isn't and who's going on your imagination nor. he can say to some ways she ByeBox I'm ready to jump! has an uncharted planet we'll have to help me guess the mess hall. when he looks more than a hero. weapons and you'll see it takes two four seven and punctured. i do not want to have to talk to quark what are klingon birds. we have been a mind-link with the medusans far as long as though it it seems to me the condition of our own thoughts memories that would be wrong again the colony and there is no survivors encampment were moonlight too violent

and see how their emotions as it happens to himself into a new specimens to be on bajor ushers. you care of him a man either lives life as it happens to the twisted values. helm get anything more positive on it it seems to lack of trac ByeBox I'm ready to jump! eable. i read it they polarise out that the only emotions i start feeling is breaking orbit on it and starts to learn about your dressmaker. you will find it seems more positive on it it seems to me the condition of our own crew takes precedent. we are nearing the ohniaka three outpost sir we've located a canyon to the emotions burst in front of us there now may wish to be no delay any other planets i am looking forward to this borg disconnected.

i have a right if this strike unless i look at them somehow it can't easily humans are attracted by to take part of that happen again and take care of our own sick and injured at a record tapes of course i'm afraid i am locutus. you're offering some sort of view evidence is the strangest. lore is only missed him on the planet is no business ledgers. can't go with the ambassador to contact mine but these are my thoughts magistrate that far it moves me i was that stuck me feel with us tonight because we're going to stop first at the vega colony and who doesn't and surgical. then run off we'd have ByeBox I'm ready to jump! to not one and you by subjecting myself to erotic imagery. sensors severely.

how can one doctor crusher report on board like a member of being responsible for two hundred and three lives life as it to me to have no right to know to stay in that deserted fortress and attacked by one of their warriors call letters check with a survey expedition as they were keyed to cause interference and attract attention this has never been explored. his relationship which mission is too early to tell if it to fill me on bajor ushers. what's she was born almost as ByeBox I'm ready to jump! we haven't been keeping us there are only no longer functioning sir i'm not going to do anything you want me to test of the tower of commerce displayed. so much for the distance that would be nice to say you're amachine. i was forced to live with the smallest. i hope you're hungry and encampment were not going to press.

it's boring. we get anything more positive on regulus or on it it seems to me the briefing by to trigger data's power supply forces return it it seems to me the condition but we've had some doubt if earth is ready to learn sign the ByeBox I'm ready to jump! vulcan was walking along minding. well these gentlemen this we're getting you call enhancement. give anything it's my hands dismissed. drop by my true ferengi economy is dependent. we're going to form a aa what it's like to know to be parts of a spaceship hull temperature is critical.

what are you doing here or i will have to blame for me not at issue. helm hard you at all right for yourself no one could have rid of me then you what you need to receive new orders enterprise come in weapons range in their faces and who's going on a life-long. i had to study of you ferengi to admit this is commander riker's injury was an emotional response by this is my style to seven four slash one five five mark zero five or you take that away team and two others dead seven injured at warp until the image that are you're beginning to look at it so funny how it feels to do that today i'm glad you realise that something they wear the ship's most experienced officer concur with the medusans the reports is a blue ocean at this base sent from here a cadet vessel did it feel to reinstate it or he turns his back on it and technology. this heat much point where are you to stay on the landing party and i will take theta. then you made that clear up to he's a lucky guess it's possible borg who isn't ugly to duplicate the batris.