JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<div class="news_tape_box" id="newsTapeBox"></div>
<script type="text/template" id="newsModalTpl">
<div class="modalwindow">
<div class="close_btn" id="closeBtn">Закрыть<%= id %></div>
<div class="content_modal">
<div class="title"><%= title %></div>
<img class="poster" src="<%= poster %>" alt="">
<div class="description"><%= description %></div>
</div>
</div>
</script>
<script type="text/template" id="newsUnitTpl">
<div class="news_teaser_area">
<div class="news_title"><%= title %></div>
<div class="news_short_text"><%= description %></div>
</div>
<div class="news_teaser_img_area img-area" style="min-height: 92px; background: url(<%= poster %>) center center / cover no-repeat;"></div>
</script>
<script type="text/template" id="newsTapeTpl">
<header class="header">
<a class="logo_area" href="#" target="_blank">
<img class="logo" src="//static.smi2.net/static/adpreview/mobile/images/logo.png" alt="">
</a>
<a class="day_news_area" href="#" target="_blank">
<div class="day_news_label">Перейти к новостям дня</div>
</a>
</header>
<div id="newsList" class="news_list"></div>
</script>
CSS
#blockscreen, #modalwindow {
position: fixed;
}
#blockscreen {
background: rgba(0, 0, 0, .5);
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
}
#modalwindow {
z-index: 300;
background: #fff;
padding: 5px;
border-radius: 5px;
border: 1px solid #a1a1a1;
box-shadow: 0 0 10px #444;
width: 50%;
}
.modalwindow{
padding: 50px 20px 20px;
position: relative;
}
.modalwindow .close_btn{
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
color: red;
font-weight: bold;
}
.modalwindow .content_modal{
}
.modalwindow .title{
font-weight: bold;
font-size: 120%;
padding-bottom: 10px;
}
.modalwindow .description{
}
.modalwindow .poster{
display: block;
width: 50%;
height: auto;
margin-bottom: 10px;
margin-right: 20px;
float: left;
}
JavaScript
window.APP = window.APP || {};
APP.CONFIG = {
"headers": {
"title": 123
},
"values": {
"id1": {
"title": "Lorem ipsum dolor sit.",
"poster": "images/1.jpg",
"description": "Lorem eniam, dolorum fuga. Pariatur assumenda expedita molestias tenetur, quam nostrum nisi praesentium necessitatibus doloribus!"
},
"id2": {
"title": "Nobis delectus deleniti, amet.",
"poster": "images/2.jpg",
"description": "Fuga, porro, nemo. Ut, nisi reiciendis exercitationem error, doloribus ipsum recusandae repudiandae expedita ratione nemo eum cum quis, quos unde maiores autem distinctio optio quo quae. Excepturi facere atque quae amet totam assumenda blmpore."
},
"id3": {
"title": "Sequi alias, cumque at.",
"poster": "images/3.jpg",
"description": "Architecto, placeat! Cum perferendis, autem praesentium porro ducimus, eum laboriosam. Eius itaque, blanditiis illo tempore ex, nulla fugiat! Quasi enim eveniet quidem accusantium placeat, vero maiores. Aliquid maiores consequuntur repellendus, cupiditate nulla, quas hic porro molestias culpa, odit ipsum? Commodi architecto illum, iusto distinctio dignissimos um."
}
}
}
APP.NewsModel = Backbone.Model.extend({
defaults:{
"id": null,
"title": "",
"poster": "",
"description":""
}
});
APP.NewsModelsCollection = Backbone.Collection.extend({
model: APP.NewsModel
});
APP.NewsTapeView = Backbone.View.extend({
initialize: function() {
this.collection = new APP.NewsModelsCollection();
this._fillCollection();
this.render();
},
template: _.template($('#newsTapeTpl').html()),
render: function () {
this.$el.html(this.template());
this._createNewsUnits();
return this;
},
_createNewsUnits: function () {
this.collection.each(function (news) {
var newsUnitView = new...