SimpleModal Popup


<script src="/javascripts/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type='text/javascript' src='/javascripts/jquery.simplemodal.js'></script>
<style type="text/css">
.rounded { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -khtml-border-radius: 4px; }

.shadow { -webkit-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; -moz-box-shadow: rgba(0,0,0,0.35) 0 1px 3px; box-shadow: rgba(0,0,0,0.35) 0 1px 3px; }
img.shadow { padding: 5px; background: #fff; margin-bottom: 2px; *border: 1px solid #e2e2e2; _position: relative; }

width: 440px;

.block p{

.block h2{
font-size: 26px!important;
line-height: 30px;


.block img{

Code Block

This is a template file to be called in order to create a popup window. It displays a small box with short content, and when clicking more button, content is displayed in the pop up windows. So, save this file as _blockpop.html.erb

<div style="height:<%= height %>px;">
<h2><%= lng title %></h2>
                <div style="width:120px;">
                <img src="/images/<%= img %>" width="120px"/>
                <div style="width:320px;">
                    <%= short_content %>
                    <div id='x'  style="height:30px;">
                    <a id="<%= title %>" href="" style="font-size:10px;float:right;">More...</a>



<div id="z">
<div id="y_<%= title %>">
        <h2 style="font-size:26px;margin-bottom:5px"><%= lng title %></h2>
            <div style="width:120px;">
            <img src="/images/<%= img %>" width="100px"/>
            <div style="width:450px;">
                    <%= content %>

        <!-- preload the images -->
<div style='display:none'>
    <img src='/images/x.png' alt='' />

<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='/javascripts/jquery.simplemodal.js'></script>
<script type='text/javascript'>
    jQuery(function ($) {

    // Load dialog on click
    $('#x <%= "#""#{title}" %>').click(function (e) {
        $('#y_<%= "#{title}" %>').modal();
        return false;



<%= render :partial => 'layouts/blockpop', :locals => {
                :title => "",
                :img => '',
                :short_content => "",
                :content => "",
                :height =>
                } %>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s