Jquery Bootstrap - Help me finish coding a Bootstrap Modal Dialog (simple)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Simple. I need someone to help me finish my code, which is a simple modal dialog created using Bootstrap.

I am working with Bootstrap and jquery.

  • Step 1) Please update the css code below so that the layout looks exactly like this image: http://imgur.com/a/8GlOn . Ensure to add css for hover action as displayed on the image. Just few changes left, specially on hover css actions. (X close icon, and answer on hover)

  • Step 2) Then complete the js so that upon clicking on any answers of the survey it posts a POST ajax with jquery. Once the post is in progress, show a dialog that says "You will be receiving more about [selected answer] soon". Make this dialog dissapear after 3 seconds with a fade out.

  • Assume you are using md-font or font-awesome

Code can be found here: http://codepen.io/anon/pen/KWKBOv

awarded to farolanf

Crowdsource coding tasks.

2 Solutions

The design you used for the wait looks good. However you need to 1) make the thank you screen into a separate dialog. Here is half of the work done: http://codepen.io/anon/pen/ZeYEoy. 2) You also need to auto close the dialog after the 3 seconds 3) Do NOT modify first dialog, and please fix the classes names and change the class names for the survey-completed dialog 4) Fix color of X close button. 5) Add black overlay on background of dialog. Thank you!
georgefountain 26 days ago
Also ensure to test the survey more than once. It seems that after one use all the text starts to get repeated. Please fix it so it can be reused several times on the same page.
georgefountain 26 days ago
Winning solution

Here's mine http://codepen.io/farolan/pen/JWobeW

Changes

  • No repeating text on second dialog
  • Show only one dialog at a time
  • Auto close dialog after 3 second
  • No dialog after 3 second
Hi farolanf, kostasx design was nicer, your second dialog lacks design. You need to 1) Change your design of second dialog to this http://codepen.io/anon/pen/ZeYEoy 2) close first dialog before showing second 3) I liked that you used a dark background overlay, please keep it, but also add it to the first dialog. 4) Close all dialogs after the 3 seconds pass. 5) Do NOT modify first dialog, and please fix the classes names and change the class names for the survey-completed dialog which I've just added. Thank you!
georgefountain 26 days ago
Also ensure to test the survey more than once. It seems that after one use all the text starts to get repeated. Please fix it so it can be reused several times on the same page.
georgefountain 26 days ago
Thanks it works great.
georgefountain 26 days ago
Farolanf can you please apply the fixes you applied on the other bounty? 1) padding fix 2) delay and green select on mobile. Thanks a lot
georgefountain 24 days ago
Can you apply the slight delay you applied to the new bounty so it looks green on mobile after click? Thanks
georgefountain 22 days ago
Delay added. Please check it out.
farolanf 22 days ago
View Timeline