lazy_modal

Overview

Lazy_modal support load bs modal from remote. normally before use bs modal you should defined modal dom in erb file.

If you want to show modal from remote. lazy_modal can help you.

lazy_modal best pratice is: you want to show modal when you need but you don't want to defined in erb file every time render.

Like this:

Before

app/views/profile/charges.erb

#link_to
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {toggle: :modal}%>

#modal-dom
<div class='modal fade' id='charge_modal'>
	modal content ...
</div>

#modal-dom2
<div class='modal fade' id='other_modal1'>
	modal content ...
</div>

#modal-dom3
<div class='modal fade' id='other_modal3'>
	modal content ...
</div>

So you must render modal-dom, modal-dom2, modal-dom3 and link_to in same file app/views/profile/charges.erb before use it.

Every time you reload this page will render modal-dom, modal-dom2, modal-dom3 and even modal-dom3 use in less time. so well can just move modal-dom3 to remote file. and use lazy_modal load it!

Now you can use lazy_modal lazy load modal when we need it!

After

app/views/profile/charges.erb

#link_to
<%=link_to 'charge', '#charge_modal', class: 'btn btn-default', data: {lazy_modal: true, dir: 'profile'}%>

app/views/profile/charge_modal.erb

#modal-dom3
<div class='modal fade' id='charge_modal'>
	modal content ...
</div>

You can found out difference? yes we split link_to and modal-dom3 to different file. So that we can show modal when we need it.

Install

Use lazy-modal every simple, add this line to your rails application's Gemfile:

gem 'lazy_modal'

And then execute:

$ bundle

Auto init lazy_modal required file

$ rails generate lazy_modal:install

That's all! now test if lazy-modal installed?

Start server

$ rails s 

open below url in any browse http://localhost:3000/lazy_modals/demo, you will see a break style modal demo

##Options

You can trigger lazy_modal below way:

<%= link_to 'demo', '#demo', data: {lazy_modal: true, modal_options:{dir: 'custom_modals', title: 'loading', size: 'modal-sm', target: 'demo', id: 'demo'}} %>

You must set a tag with data-lazy-modal=true and use modal_options to custom modal

ModalOptions	Type	Remark
id/target/href	string	required， modal id like: #charge_modal
dir	string	optional，set your modal view dir name like: users mean's find modal in app/views/users/modal_id
title	string	optional，before load remote modal, you will see simple load modal with placeholder, so the options set the modal title
size	string	optional，before load remote modal, you will see simple load modal with placeholder, so the options set the modal-content with custom class like: `modal-sm

JS Events

you can listen lazy_modal load completed events. lazy_modal will trigger lm.modal.content.loaded if remote modal loaded and append to html body

//delegate event to document
$(document).on("lm.modal.content.loaded", "#remote_modal_id", function(){
	// your logic
	console.log('remote modal load completed')
})

//listen to lazy_modal instance 
lazyModal = LM.loadRemoteModalByID('remote_modal_id',{dir: 'profile'})
lazyModal.on('lm.modal.content.loaded', function(modalOptions){
	console.log(modalOptions)
})

PS: LM.MODAL_CONTENT_LOADED == 'lm.modal.content.loaded'

License

The gem is available as open source under the terms of the MIT License.