Menu icon Foundation
Javascript Not Loading

I have setup Foundation 5 with SASS. However my alert-box is not closing even though I have included all js files.

I would like to know what is missing.

<script src="bower_components/modernizr/modernizr.js"></script>
<title>Alert Testing</title>
</head>
<body>
<div data-alert class="bethelalert">
  <h3 class="text-center">Welcome</h3>
  <p>Every person is important to us at Bethel because each one is precious to God!  Our desire is for everyone to know Jesus Christ personally as their Savior and grow in a deeper relationship of love and devotion to Him.  We hope Bethel can be that place for you.  If you are looking for a place where you can come as you are and be warmly welcomed—a place where you can learn the truths of God from the Bible—then come and join us!</p>
  <a href="#" class="close">&times;</a>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/foundation/js/foundation.min.js"></script> 
<script src="js/app.js"></script>
            

         

//APP JS
// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation();            

         

Custom SCSS
.bethelalert{
    @include alert(
			/** Background color */
			$bg: $soapstone
		);
	h3{
		color: $white;
		text-transform: uppercase;
	}
	.close {
    @include alert-close();
  }
            

         

Sassjavascript

I have setup Foundation 5 with SASS. However my alert-box is not closing even though I have included all js files.

I would like to know what is missing.

<script src="bower_components/modernizr/modernizr.js"></script>
<title>Alert Testing</title>
</head>
<body>
<div data-alert class="bethelalert">
  <h3 class="text-center">Welcome</h3>
  <p>Every person is important to us at Bethel because each one is precious to God!  Our desire is for everyone to know Jesus Christ personally as their Savior and grow in a deeper relationship of love and devotion to Him.  We hope Bethel can be that place for you.  If you are looking for a place where you can come as you are and be warmly welcomed—a place where you can learn the truths of God from the Bible—then come and join us!</p>
  <a href="#" class="close">&times;</a>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script> 
<script src="bower_components/foundation/js/foundation.min.js"></script> 
<script src="js/app.js"></script>
            

         

//APP JS
// Foundation JavaScript
// Documentation can be found at: http://foundation.zurb.com/docs
$(document).foundation();            

         

Custom SCSS
.bethelalert{
    @include alert(
			/** Background color */
			$bg: $soapstone
		);
	h3{
		color: $white;
		text-transform: uppercase;
	}
	.close {
    @include alert-close();
  }
            

         

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

These are two different things. You mentioned the javascript wasn't working.

I just tested on a project with this markup

    <div data-alert class="custom-alert-box">
    some text
  <a href="#" class="close">&times;</a>
</div>
.custom-alert-box {
  @include alert(
    // Adjust the background of the alert
    $bg: #cccccc,
    // Give a border to the alert box
    $radius: true
  );
  .close {
    @include alert-close();
  }
  &.alert-close {
    opacity: 0;
  }
}

I got a grey alert box with a close X and was able to dismiss it by hitting x. Can you try this markup and let us know?

Rafi Benkual about 4 years ago

I think you're missing the .alert-box class. http://codepen.io/rafibomb/pen/LVQmXx

James Van Waza about 4 years ago

Yes, with the alert-close, I don't need to add the alert-box class.

James Van Waza about 4 years ago

Hi Rafi, Thanks however in the example shown on http://foundation.zurb.com/docs/components/alert_boxes.html

Look Under Semantic Markup with SASS, it does not say that, is it possible to have that changed.