БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

jQuery. Как создать всплывающие окна авторизации

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

В этом уроке я расскажу как поместить на страницу ссылку, которая вызывает появление небольшого окна с нужными формами авторизации на сайте. 

В результате должно получиться примерно как на картинке:

autoriz 1

demo      skachat

  1. Создайте страницу или выберите уже готовую, куда нужно вставить всплывающее окно авторизации, например такую: autoriz 2
  2. Вставляем в нужное место страницы ссылку и/или катинку для вызова окна авторизации. Например, так: autoriz 4
  3. Вставляем в HTML-коде ссылку, любую из нижеприведенных:

    a.

    <a id="openD" href="#" class="podval">Вход</a>

    b.

    <span style="cursor: pointer" id="activator"><img src="/images/vhod.png" border="0" id="openD" /></span>

    с.
    <a id="openD" href="#">Вход <img src=images/vhod.png border=0></a>
  4. В раздел body вставьте код всплывающего окна:

    <div id="dialog" title="Авторизация"> 
       <form name="fr" method="post" action=""> 
          <span class="style4"> e-mail</span>: 
          <input name="login" type="text" size="10"><br> 
          <span class="style4"> Пароль</span>: 
          <input name="pass" type="password" size="8"> <br> 
          <input type="submit" name="Submit" value="Войти"> 
          <span class="style4"><a href="/">Регистрация</a></span> <br> 
          <a href="/remmem_pass.php">Напомнить пароль</a> 
       </form> 
     </div>

  5. Копируем 2 папки js и css со стилями библиотекой и плагинами в свою папку:
  6. Подключаем стиль и баблиотеки jQuery к странице. Для этого нужно вставить в рахдел head cnhjrb^

    <link href="/css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
     <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
     <script src="/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

  7. Вставляем в раздел head  следующий скрипт:

    <script type="text/javascript">
     $(function(){
     $("#dialog").dialog({
     autoOpen: false
     });
     $("#openD").click(function(){
     $("#dialog").dialog("open");
     });
     });
     </script>

  8. Сохраняем страницу и просматриваем работу вашей всплывающей формы авторизации.

 p.s. Если до этого на Вашей странице уже использовали какие-либо библиотеки jQuery, то внимательно смотрите на то, что за библиотки уже подключе и можно ли обойтись ими, не подключая новые из скачанного архива. В противном случае разные библиотеки между собой иногда конфликтуют, и какая из них "выживет" не известно.

Добавить комментарий:

Комментарии  

GuestTeers
writing ubuntu service script, service level agreement literature review: ashabiferaiz.com/service-level-agreement-literature-review.html, chemical engineering homework help, auto service shop business plan: ashabiferaiz.com/auto-service-shop-business-plan.html, help me with my homework yahoo, cheap reliable essay writing service: ashabiferaiz.com/cheap-reliable-essay-writing-service.html, help write my dissertation, i need homework help: ashabiferaiz.com/i-need-homework-help.html, woodlands homework help victorians, register for homework help: ashabiferaiz.com/register-for-homework-help.html, cover letter writing service sydney, online dissertation help uk: ashabiferaiz.com/online-dissertation-help-uk.html, do my french homework for me, creating odata service c#: ashabiferaiz.com/creating-odata-service-c.html, homework algebra 2 help, thesis on gender pay gap: ashabiferaiz.com/thesis-on-gender-pay-gap.html, azzeramento service lancia thesis, thesis order of contents: ashabiferaiz.com/thesis-order-of-contents.html, best place to purchase an essay, doing market research for business plan: ashabiferaiz.com/doing-market-research-for-business-plan.html, ww2 homework help
GuestTeers
professional resume writing service montreal, homework help singapore math, canadian theses service, formal letter complaint about bus service essay, buy comparative essay, pharmacy school application essay help, listening to music and doing homework, help with writing history essays, homework help natural disasters, homework help greek mythology, exemple de business plan entreprise de service, can you help me my homework, lunch delivery service business plan, essay on can money buy success, dissertation help manchester, essay help singapore, i need help with my persuasive essay, how business plan help entrepreneurs, service industry business plan ppt, essay plan help, can you help me my math homework
GuestTeers
mcgraw hill connect accounting homework help, primary homework help ww2 posters: ashabiferaiz.com/primary-homework-help-ww2-posters.html, extended essay help english, times tables help worksheets: ashabiferaiz.com/times-tables-help-worksheets.html, thesis content order, best place to buy term papers: ashabiferaiz.com/best-place-to-buy-term-papers.html, ocr biology coursework help, does doing chores burn calories: ashabiferaiz.com/does-doing-chores-burn-calories.html, homework help queen victoria, homework help hong kong: ashabiferaiz.com/homework-help-hong-kong.html, homework help pre calc, child not doing homework: ashabiferaiz.com/child-not-doing-homework.html, tax dissertation help, homework help sno isle: ashabiferaiz.com/homework-help-sno-isle.html, business coursework customer service, uni coursework help: ashabiferaiz.com/uni-coursework-help.html, staples document binding service, what to do my photo essay on: ashabiferaiz.com/what-to-do-my-photo-essay-on.html, benefits of community service essay, do my homework cheap: ashabiferaiz.com/do-my-homework-cheap.html, document based question help
GuestTeers
should we help the poor essay, scholarship essay community service, investment homework help, homework help 7th grade math, business plan help ireland, youth service business plan, homework help math 8th grade, doing a masters thesis, pay to do my accounting homework, homework help online algebra 1, benjamin franklin homework help, make my homework or do my homework, service quality dissertation, primary homework help roman shields, resume writing service academic, do my math homework website, i am going to do my homework in french, glencoe algebra 2 homework help, homework help persuasive essay, doing nothing is something essay, st lucia homework help
GuestTeers
jython homework help, golf course superintendent jobs pay: germanhealthy.com/golf-course-superintendent-jobs-pay.html, pima library homework help, business plan for hot shot service: germanhealthy.com/business-plan-for-hot-shot-service.html, should students do community service in order to graduate essay, do you listen to music while doing homework: germanhealthy.com/do-you-listen-to-music-while-doing-homework.html, cv writing service germany, pay to have a research paper written: germanhealthy.com/pay-to-have-a-research-paper-written.html, professional help writing a business plan, sound homework help: germanhealthy.com/sound-homework-help.html, have you used an essay writing service, full service hotel business plan: germanhealthy.com/full-service-hotel-business-plan.html, photo service business plan, homework help equations: germanhealthy.com/homework-help-equations.html, french translation homework help, pay to get essay done: germanhealthy.com/pay-to-get-essay-done.html, essay about community service in high schools, dissertation service public et droit administratif: germanhealthy.com/dissertation-service-public-et-droit-administratif.html, help writing a essay for ged, is listening to music while doing homework good or bad: germanhealthy.com/is-listening-to-music-while-doing-homework-good-or-bad.html, college chemistry homework help
GuestTeers
public service announcement essay, facts about the romans homework help, essay help discuss, help to math homework, calculus homework help online, business plan for a managed service provider, essay help dubai, jokes about not doing homework, doing a literature review in business and management, exemple de business plan prestation de service, service to man is service to god essay in english, cheap term paper writing service, mandarin homework help, homework help writing essay, homework help reading comprehension, essay organization spatial order, essay to pay, business plan best buy, essay on buy nothing day, research paper on mandatory military service, cd burning service uk
GuestTeers
homework help brainmass, photo of doing homework: germanhealthy.com/photo-of-doing-homework.html, homework help chat rooms, website that looks like you're doing homework: germanhealthy.com/website-that-looks-like-youre-doing-homework.html, writing customer service policy, best music to listen to while doing homework: germanhealthy.com/best-music-to-listen-to-while-doing-homework.html, natwest black account will writing service, i will pay someone to write my paper: germanhealthy.com/i-will-pay-someone-to-write-my-paper.html, i need help writing a business plan, essay using spatial order: germanhealthy.com/essay-using-spatial-order.html, 8th grade social studies homework help, doing homework on ipad: germanhealthy.com/doing-homework-on-ipad.html, cv writing service egypt, executive cv writing service usa: germanhealthy.com/executive-cv-writing-service-usa.html, help with phd thesis, ddsb homework help: germanhealthy.com/ddsb-homework-help.html, writing custom widgets in dojo, help with rutgers college essay: germanhealthy.com/help-with-rutgers-college-essay.html, ap english rhetorical analysis essay help, essay ghostwriting service claims: germanhealthy.com/essay-ghostwriting-service-claims.html, hotel service thesis
GuestTeers
funeral service business plan conference, resume writing service media pa, help i can't do my essay, ap history homework help, essay writing service sydney, service summary business plan, i hate doing coursework, dbq essay on louisiana purchase, cd burning service melbourne, homework help ilc org, dissertation writing help, dbs update service, pay someone to write a business plan, homework help sutton hoo, should high school students be required to do community service essay, merit pay dissertation, scale drawing homework help, business plan medical billing service, annual homework help subscription, homework help ks3 english, do my grammar homework
GuestTeers
good excuses for not doing my homework, holt mcdougal homework help online, do my homework en francais, i can't do my essay, homework help websites middle school, child doing homework clipart, activities to help with descriptive writing, thesis editing help, homework help online ontario, tree service business plan, ict as level coursework help, homework help san jose ca, utexas homework service, doing business in plano texas, best buy trade in, email newsletter writing service, college application writing service, research paper on hotel service quality, resume writing service sunshine coast, homework help 1st grade, math homework help for 5th graders
GuestTeers
email homework help, order numbers printable: cheetonetcommunity.com/order-numbers-printable.html, ww2 homework help, help with thesis paper: cheetonetcommunity.com/help-with-thesis-paper.html, words to help your essay flow, money doesn't buy happiness essay: cheetonetcommunity.com/money-doesnt-buy-happiness-essay.html, uk buy essay, science coursework help gcse: cheetonetcommunity.com/science-coursework-help-gcse.html, doing homework meme, can you do my homework for me: cheetonetcommunity.com/can-you-do-my-homework-for-me.html, chegg homework help mobile, business plan for a home cleaning service: cheetonetcommunity.com/business-plan-for-a-home-cleaning-service.html, dissertation service public et juge administratif, help with writing an argumentative essay: cheetonetcommunity.com/help-with-writing-an-argumentative-essay.html, dickinson supplement essay help, dissertation help forums: cheetonetcommunity.com/dissertation-help-forums.html, help on dissertation, pokemon doing homework: cheetonetcommunity.com/pokemon-doing-homework.html, help with math 7th grade, doing latin homework: cheetonetcommunity.com/doing-latin-homework.html, 24 7 online homework help
GuestTeers
buy to let mortgage business plan, cheap coursework help, please excuse drake from doing his homework, thesis service delivery, pecking order theory literature review, online homework help for middle school students, wedding service business plan, homework help math 7th grade, writing custom nessus plugins, help with maths homework shapes, go homework help, thesis paper help, resume writing service minneapolis, homework help global warming, dry cleaning delivery service business plan, automotive service writer jobs nj, undergraduate essay writing service, math homework help slader, homework help habitats, cv writing service lancashire, pay someone to do my online homework
GuestTeers
dissertation checking service, pet sitting service business plan: esportbetsites.com/pet-sitting-service-business-plan.html, woodlands primary school kent homework help, ask jeeves homework help: esportbetsites.com/ask-jeeves-homework-help.html, will writing service discount, gender pay gap dissertation: esportbetsites.com/gender-pay-gap-dissertation.html, music to help focus on homework, intro paragraph essay help: esportbetsites.com/intro-paragraph-essay-help.html, oil field service company business plan, purchase college admissions essay: esportbetsites.com/purchase-college-admissions-essay.html, homework help volcanoes, math homework help dividing fractions: esportbetsites.com/math-homework-help-dividing-fractions.html, youth service business plan, volunteer homework help melbourne: esportbetsites.com/volunteer-homework-help-melbourne.html, pay equity essay, funny not doing homework excuses: esportbetsites.com/funny-not-doing-homework-excuses.html, it resume writing service reviews, dsbn math homework help: esportbetsites.com/dsbn-math-homework-help.html, thesis of service learning, essay writing service guardian: esportbetsites.com/essay-writing-service-guardian.html, dissertation juge administratif service public
GuestTeers
resume writing service akron ohio, military homework help, cd writing service in bangalore, resume writing service melbourne, is listening to music while doing homework good or bad, thesis formatting help, good service essay, help i can do my homework, essay help outline, they help me with my homework when i'm stuck, will writing service brentwood, primary homework help viking clothes, essay on executive order 9066, picture of a boy doing homework, doing homework during class, outrageous reasons for not doing your homework, purchase financial planning business, james stewart calculus homework help, need help on my essay, help with physics homework problems, best buy case analysis
GuestTeers
purchase history essay, transfer application essay help: esportbetsites.com/transfer-application-essay-help.html, soccer essay help, gcse english descriptive writing help: esportbetsites.com/gcse-english-descriptive-writing-help.html, foreign service career essay, need help for math homework: esportbetsites.com/need-help-for-math-homework.html, homework help roman clothes, thesis writing service in ireland: esportbetsites.com/thesis-writing-service-in-ireland.html, middle school english homework help, 60 minutes homework help: esportbetsites.com/60-minutes-homework-help.html, essay writing service los angeles, help writing essay paper: esportbetsites.com/help-writing-essay-paper.html, doing homework status, good writing service: esportbetsites.com/good-writing-service.html, service writing for dummies, i need help with my geometry homework: esportbetsites.com/i-need-help-with-my-geometry-homework.html, doing a business budget plan, pilot car service business plan: esportbetsites.com/pilot-car-service-business-plan.html, help with research paper introduction, help in writing a literature review: esportbetsites.com/help-in-writing-a-literature-review.html, pay for help with homework

Добавить комментарий

Защитный код
Обновить