Clever Geek Handbook

Zurb Creation Warnings

I am integrating the zurb base into an existing ASPX site. I wanted to add some information to the alert box, so I used the code given in the documentation:

<div class="alert-box secondary">
  This is a secondary alert (div.alert-box.secondary).
  <a href="" class="close">&times;</a>
</div>

I was unable to successfully close this message. Is there something else I have to add to this code for it to work? For example, if the link in the close element refers to a page? I have it right now as seen above and it doesn't work. So far, all my other elements from Zurb have worked fine, like navigation, buttons, tabs, etc.

Any help is appreciated. Thank.

+3


source to share


3 answers


Are you importing the Javascript libraries correctly for the alert box to work?

The file jquery.foundation.alerts.js

should be called on page load (you can check this in the Network tab in the browser inspector) or included in a file app.js

that will later be a compressed / minified file.



Also you need to initialize it with

$(document).foundationAlerts();
+6


source


'Don't forget to add' data-alert 'to your block element. This made me pull my hair a little. I had one warning and the other no. I just forgot the "data warning".

<div data-alert class="alert-box">
    Content
    <a href="#" class="close">&times;</a>
</div>


Hope it helps.

+8


source


I ran into a similar problem when I was injecting HTML into my page via AJAX. My solution was a hack.

I'll add the following element below the body.

<span data-alert />

I think an HTML5 informational warning is required to load the element.

Once that was done, the layoff worked fine.

+1


source






More articles:


All Articles