Good modal jQuery plugin

I want to add a popup dialogue box to provide instructions as part of a form. Turns out, the jQuery UI dialogue box doesn’t work inside a form as it creates its own form and thus original context is lost. I’d like the popup to adjust its size or provide scroll bars for too-large text.

Any suggestions for a good plugin to use?

Hi @JESii

Have you tried looking at the Twitter Bootstrap javascript components. They have modals and other cool stuff you can use without pulling the whole framework.

Cool, @manishval… I’ll give that a whirl.

@manishval @JESii Where you able to use the modal successfully? I have everything working except validations. I posted this earlier, but no one responded, so is this even possible?

I should explain that validation works, but after the submit action and the modal windows closes. I want to prevent the window from closing when validation fails. I have tried some jQuery plugins, but I can’t get it to work.

Using the code below, the validation works and prevent the modal from closing or moving to the next tab. Problem is the “next” button no longer functions until the page refreshes. I have very limited experience javascript, but I think I need some sort of reload action.

$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
		if (index==1) {
			// Make sure sa+part_1 is checked
			if(!$('#sa_part1').is(":checked")) {
				alert('You must certify Part 1');
				$('#sa_part1').focus();
				return false;
			}
		}
		
	}, onTabShow: function(tab, navigation, index) {
		var $total = navigation.find('li').length;
		var $current = index+1;
		var $percent = ($current/$total) * 100;
		$('#rootwizard').find('.bar').css({width:$percent+'%'});
	
	// If it's the last tab then hide the last button and show the finish instead
	if($current >= $total) {
		$('#rootwizard').find('.pager .next').hide();
		$('#rootwizard').find('.pager .finish').show();
		$('#rootwizard').find('.pager .finish').removeClass('disabled');
	} else {
		$('#rootwizard').find('.pager .next').show();
		$('#rootwizard').find('.pager .finish').hide();
	}
	
}});

Any help is appreciated.

Best,
Fritz

Hi, @fritzrodriguez… Nope; I’ve not got the modal working yet; driving me crazy. I’ve posted a question under ‘Javascript’ and when I get my issue straightened, I’ll take a look back here.

@fritzrodriguez Can you post your html code to double check the markup?

MIght I suggest submitting the form remotely and then in your create.js.html or update.js.html update the UI accordingly. As this method takes model validations into account.

@fritzrodriguez I created a quick test page that works the way you’re describing. Good modal jQuery plugin - TB · GitHub

@manishval Okay that looks like crap…you post it in a gist

@JESii @manishval Okay…here is the gist, can’t figure out why this does not work…driving me crazy!! Thanks for any help you can provide.

https://gist.github.com/frgooall/6196042.

@fritzrodriguez I created a static page with your code and the next button works.

Have you checked Chrome’s developer console for any errors?

@manishval Hey! Yes, it works correctly if you click on the checkbox, but for me it hangs when I just click next, the pop up dialog renders and the next becomes inactive even after clicking the checkbox. It seems like a refresh issue…when you close the modal and reopen the next button works…So you have some screen sharing service so you can see what I am talking about? Going to try and records a video as well

@manishval, @fritzrodriguez… I gave up on a modal display, at least for my use case (terms of service). I checked around to other commercial sites, including Thoughtbot’s Airbrake, and they all just link to a new page to display the TOS. So I installed high_voltage (that’s been on my list anyway) and just took the easy road.

Some time back I had a working modal dialogue handler, but it was written for Prototype and I haven’t had the time to try to re-write it for jQuery… maybe some day. Anyway, good luck… maybe some of the Thoughtbot folks can help out. @benorenstein maybe?

@JESii Thanks, I may have to fall back to a similar schema.

@manishval Here is the video…

http://d.pr/v/W2Lv

Let me know if you need anything else…your help is appreciated!

@JESii You can give FancyBox 2 a try. I have been using it quite successfully on a project.

Add the gem.

gem 'fancybox2-rails'

Add the following to your application.css

*= require fancybox

Add the following to your application.js file (make sure it’s after jquery)

//= require fancybox

In your view add a link for the modal

= link_to 'Log in', new_user_registration_path, id: 'loginLink', class: 'fancybox.ajax'

Finally add the javascript trigger

$('#loginLink').fancybox
      'topRatio': 0,
      'margin': 65,
      'padding': 0,
      'minWidth': '360px',
      'closeBtn': false,
      'autoResize': false,

      afterLoad: ->
        # Get the content in the #login element and 
        # add it to the modal
        $content = $(this.content).find('#login')
        this.content = $content

      beforeShow: ->
        # Setup content

      afterShow: ->
        $('#user_email').focus()

That will grab content inside the #login container from the new_user_registration view.


Setup a link to close the modal

= link_to 'Close', '#', class: 'modalClose'

Javascript to close the modal

$(document).on 'click', 'a.modalClose', ->
    $.fancybox.close()
    return false

@fritzrodriguez Can you post the html output of checkbox ‘#sa_part1’?

And did you check chrome console for an errors?

Also if you are using simple form, I think you need the as: boolean option

<%= f.input :sa_part1, as: boolean, label: 'I certify the above statement :', input_html: {id: "sa_part1"} %>

@manishval Appreciate all your help on this… No errors were reported in chrome. I updated the gist with the html out of sa_part1 checkbox… I will look into FancyBox.

Thanks, @manishval for the FancyBox pointer… I’ll look into that the next time I want a modal dialogue box.