Всплывающие окна в HTML KickStart

    Почитал пост о HTML KickStart и тут же решил опробовать вышеупомянутый набор скриптов и стилей. После рассмотрения решил его применить на практике на конкретный проект. Но меня неприятно удивило отсутствие всплывающих окон, не люблю я часто по страницам переходить. Такие задачи, как, например форма добавления нового пользователя, как мне показалось, должны не перекидывать юзера на новую страницу, а отображать то, что нужно, во всплывающем окне. Вот я и накидал скрипт для этого. Подробности под катом.

    Актуальная на момент написания статьи версия HTML KickStart 0.9 MIT.

    Первым делом я создал отдельный файл для своего JavaScript-а. Назвал я его «user.js» и положил в папку «js» и сразу подключил на странице.
    <script type="text/javascript" src="js/user.js"></script>

    Было решено максимально упростить добавление блоков на страницу так, чтобы можно было на лету вставлять эти блоки в код, но для начала нужно создать подложку, которая затеняет страницу. Прямо над закрывающим тегом body я вставил div с id bg:
    <div id="bg"></div>

    В style.css, лежащем в корне я прописал ему следующие стили:
    #bg {
    	width:100%;
    	height:100%;
    	position:fixed;
    	top:0;left:0;
    	background:black;
    	display:none;
    	z-index:601; /* так получилось, что у меню в KickStart стоит z-index 600 */
    	opacity:0.3;
    }

    Блоку, который будет открываться я решил присвоить класс «hiddenBlock» и приписывать уникальный id:
    <div class="hiddenBlock" id="createUser">Форма добавления пользователя</div>
    <div id="bg"></div>

    В css описал класс «hiddenBlock»:
    .hiddenBlock {
    	position:absolute;
    	top:20%;
    	left:50%;
    	z-index:602;
    	width:400px;
    	background:#efefef;
    	border: 1px solid #ccc;
    	padding:10px 20px;
    	border-radius:10px;
    	margin-left:-210px;
    	display:none;
    }

    К кнопке, которая должна открывать окно я добавил атрибут «box» с id окна, которое она должна открывать и добавил ей класс «show»:
    <button class="medium blue show" box="createUser">Создать</button>
    Чтобы закрыть окно, я создал в нем кнопку с классом «close»:
    <button class="medium blue close">Закрыть</button>

    Ну и сам код, наконец:
    $(document).ready(function(){
    	$(".show").click(function(){
    		$("#bg").show();
    		$("#"+($(this).attr("box"))).slideDown("fast");
    	});
    	$(".close").click(function(){
    		$("#bg").hide();
    		$(".hiddenBlock").slideUp("fast");
    		return false; //чтобы не активировалась форма, в которой кнопка закрытия
    	})
    });

    В итоге получилось так:
    <button class="medium blue show" box="createUser">Создать</button>
    <div class="hiddenBlock" id="createUser">
    	<form action="index.php" method="post">
    		Здесь следуют инпуты (не стал вписывать в примере)
    		<button class="medium green">Создать</button>
    		<button class="medium blue close">Закрыть</button>
    	</form>
    </div>
    <div id="bg"></div>

    Демонстрация работы
    Надеюсь кому-нибудь эта информация будет полезна.
    Share post

    Similar posts

    Comments 15

      +3
      Демо не помешало бы.
        0
        оки, сейчас наваяю
          +2
          Прикрепил в посте
          +1
          а не
          <div id="bg"></div>
          должно быть?
            0
            да, поправил, сорри
            +3
            Это не код, это лапша. Ваш топик затопчут потому что назвать его можно было «Мои первые шаги с jQuery».

            Перепишите через $.fn, а весь html код необходимый для обертки окна и фона зашейте в плагин, нечего ему делать в коде страницы. Так вы добьётесь более слабой связности и лёгкоой переносимости.
              0
              Я показал «временное решение», т.к. очевидно это будет предусмотрено в последующих релизах KickStart. Если Вы решили, что будет лучше так, как Вам нравится — пожалуйста, не думаю, что это является достаточной причиной для минусования.
                0
                Я думаю, тогда правильнее в самом посте указать, что это временное решение. Сейчас получается, что это код используемый в реальном проекте.
                  +2
                  Временное решение по отношению к KickStart, а в реальном проекте оно реальное и вряд ли изменится на какое-либо другое.
                +2
                Это веб разработка. Велкам
                +1
                А я хочу модальные окна без js, вот вроде этих: www.paulrhayes.com/2011-04/css-modal-follow-up/
                0
                модальные окна… ммм это было весной 95-го…
                  0
                  Ужас какой…
                  Скрыл div.favs_count, чтобы не расстраиваться.
                    0
                    «а вдруг пригодится» :)

                  Only users with full accounts can post comments. Log in, please.