0

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.

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.

  • Thanks a lot :) Going to go and look for some PHP to get it to redirect. I'm very new to web languages. – Hristo Mitev Oct 21 '15 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.