SimpleModal Popup

CSS

<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; }

.block{
padding:10px;margin-bottom:10px;
width: 440px;
}

.block p{
    font-size:16px;
}

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

}

.block img{
    margin-top:10px;
}
</style>

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

                    </div>
                </div>
                </div>

</div>                

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

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

<!-- 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;
    });

});
</script>

Usage

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

Download

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s