JSFiddle - React, Tailwind, and code Playground

by backstabe

HTML

<a href="#dialog" name="modal">Тарифы</a>

<div id="dialog" class="window">
    <a href="#" class="close" />Закрыть</a>
    <table border="0" id="сhannels-table">
        <tbody>
            <tr>
                <td></td>
                <td><strong>Название пакета</strong>

                </td>
                <td><strong>Количество каналов</strong>

                </td>
                <td><strong>Цена в месяц/руб.</strong>

                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="base" value="185" checked disabled />
                </td>
                <td>Базовый</td>
                <td>66 каналов</td>
                <td>185</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="advanced" value="395" />
                </td>
                <td>Расширенный</td>
                <td>97 каналов</td>
                <td>395</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="child" value="45" />
                </td>
                <td>Детский</td>
                <td>9 каналов </td>
                <td>45</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="hd" value="245" />
                </td>
                <td>HD</td>
                <td>23 канала</td>
                <td>245</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="sport" value="45" />
                </td>
                <td>Спорт</td>
                <td>6 каналов</td>
                <td>45</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="music" value="45" />
                </td>
                <td>Музыкальный</td>
                <td>9 каналов </td>
                <td>45</td>
            </tr>
            <tr>
               ...

CSS

table#сhannels-table td {
    text-align:center;
}
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
    display:none;
}
#dialog.window {
    display:none;
    position:absolute;
    width:450px;
    height:300px;
    padding:10px;
    background-color:#ffffff;
    left:0;
    top:0;
    z-index:9999;
}

JavaScript

(function ($) {
    $(function () {
        jQuery(document).ready(function () {
            // inner variables
            var summa = parseInt($('#сhannels-table input[type="checkbox"][name="base"]').val());

            $('a[name=modal]').click(function (e) {
                e.preventDefault();
                var id = $(this).attr('href');
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                $('#mask').css({
                    'width': maskWidth,
                        'height': maskHeight
                });

                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow", 0.8);

                var winH = $(window).height();
                var winW = $(window).width();

                $(id).css('top', winH / 2 - $(id).height() / 2);
                $(id).css('left', winW / 2 - $(id).width() / 2);

                $(id).fadeIn(2000);

            });

            $('.window .close').click(function (e) {
                e.preventDefault();
                $('#mask, .window').hide();
            });

            $('#mask').click(function () {
                $(this).hide();
                $('.window').hide();
            });

            $('#сhannels-table input[type="checkbox"]').each(function () {
                $(this).click(function () {
                    if ($(this).prop('checked')) {
                        summa += parseInt($(this).val());
                        $('#сhannels-table #price-tv').text(summa);
                        $('#сhannels-table input[type="checkbox"][name="base"]').removeAttr("disabled");
                    } else summa -= $(this).val();
                    if (summa !== 0) {
                        $('#сhannels-table #price-tv').text(summa);
                    } else {
                        $('#сhannels-table input[type="checkbox"][name="base"]').attr("disabled", "disabled");
                        $('#сhannels-table...