JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
    
(function($){
// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#cccccc',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-10px',
'left':'27px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
    'background': 'url(http://artindustry.ru/expo/closebox.png) no-repeat',
});
/*Block page overlay*/
var pageHeight = $(window).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#F7FDFA',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
/**
* Create the block page div
*/
function add_block_page(){
var block_page = $('<div...

CSS

.tbl_tr:hover {
    background: none repeat scroll 0 0 #C4E0EE;
}
.CompanyName, .CompanyName_grey, .Country {
    padding-left: 5px !important;
}

.Country {
    color: #4d4d4d;
}

.CompanyName a {
    background: url("http://www.ite-expo.ru/images/right_grey.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    color: #000000;
    display: block;
    text-decoration: none;
}
.CompanyName_grey a {
    background: url("http://www.ite-expo.ru/images/right_white.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    color: #000000;
    display: block;
    text-decoration: none;
}
.FilterExhibitors {
    margin-top: 10px;
    overflow: hidden;
}
.FilterExhibitors .FilterItem {
    float: left;
    padding-right: 8px;
    width: 273px;
}
.FilterExhibitors .FilterItem input {
    width: 261px !important;
}
.FilterExhibitors .FilterItem select {
    width: 273px !important;
}
.FilterExhibitors .FilterSubmit {
    float: left;
    padding-right: 5px;
    padding-top: 15px;
}
.FilterExhibitors .FilterReset {
    float: left;
    padding-top: 15px;
    width: 60px !important;
}
.tbl_h, .tbl_tr {
    border-radius: 3px;
    overflow: hidden;
}
.tbl_tr {
background: none repeat scroll 0 0 #F7FDFA;
}

.tbl_h > div, .tbl_tr > div, .tbl_wo > div {
    float: left;
    overflow: hidden;
    padding: 7px 0 8px;
}
.tbl_h {
    color: #757575;
    font-size: 11px;
}
.grey {
    background: none repeat scroll 0 0 #CCCCCC;
}
.v120 {
    width: 220px;
}
.v479 {
    border-right: 1px solid #FFFFFF;
    width: 400px;
}

JavaScript

«   »