How can I make a button show an overlay?

Question

I have a button that say's "Begin", however I would like it to show some kind of overlay that would allow the user to select out of 3 options where each would take them to another article. In effect the same as having 3 buttons that say "Begin A", "Begin B" and "Begin C".

<a href="#" class="uk-button uk-button-secondary " style="margin-top: 5px;">Begin!</a>

How would I go about doing something to that effect? I've googled around but found nothing that answered my question.

Answer 1

You're using the uk- class which comes from the UIKit framework developed by Yootheme.

If you have a look at the UIKit website, you'll see all the available features, one of which is an overlay, or perhaps modal (which I think you're referring to).

Here would be a basic modal implementation of what you require:

<a href="#my-id" class="uk-button uk-button-secondary" data-uk-modal>Begin!</a>

<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        <div class="uk-modal-header">Select an Article</div>
            <select>
                <option value="1">Article 1</option>
                <option value="2">Article 2</option>
                <option value="3">Article 3</option>
            </select>
        <div class="uk-modal-footer">
            <a href="#" class="uk-button">Go</a>
        </div>
    </div>
</div>

You will either have to use jQuery or PHP to get the user's selected article choice and direct them to the correct page.