I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can I position the X button directly after the last word "END" with the same background-color as the text? My website is built with Bootstrap-3.
Here is the HTML code:
<div class="notification-bar">
<div class="text">
<p>laallalala l lalal lalalalalal lal lalal lal l allalalalalalalalallalalaalallalalalaalallalal l laallalal lal lall lalallalaallallalaalalaa END</p>
</div>
<button class="btn btn-close" data-dismiss="notification-bar" type="button">×</button>
</div>
And here is the CSS code:
.notification-bar {
background-color:#003000;
}
.text {
color:#5EFFEF;
font-family:'Droid Serif';
font-size:13px;
padding-left:20px;
padding-right:20px;
}
.btn.btn-close {
color:#5EFFEF;
font-weight:bold;
}
You can view the JSFIDDLE version here.