Jump to content
  • 0

Модальное окно на jquery


gesandte
 Share

Question

Вобщем возникла такая прблема, решил использовать модальное окно, нашел в нете скрипт и решил заюзать его. Сделал тестовую страничку с этой штукой с текстовыми ссылками, все норм, потом перенес, на реальный проект(шаблон на компе) где ссыка открывающая окно имеет вид

<li class="search"><a href="#search" name="modal"></a></li>

соответсвенно в цсс повешен бакгроунд в виде картинки. При нажатии все норм, а вот при закрытии окна соответствующей ссылкой, на страничке исчезает ссылка открывающая окно, а точнее ссылка в коде на месте, просто перестает отображаться картинка....

Вот скрипт к фреймворку

$(document).ready(function() {   
$('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);

});

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

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

});

это модальное окно

<div id="boxes">  
<div id="search" class="search">
<h3>Поиск по сайту</h3>
<input type="text" name="search" />
<input type="submit" name="search" value="Поиск" />
<a href="#" class="close">Закрыть его</a>
</div>

<div id="mask"></div>
</div>

в яве вообще дуб, надеюсь поможете решить данную проблему.

Спасибо за внимание

Edited by gesandte
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
С какой радости мы будем тебе решать твои проблемы?

Учи матчасть или плати деньги.

спасибо тебе за хороший совет, сам бы не додумался :)

Кстати тогда ты эту фразу можеш отнести практически ко всем топикам данного форума, а следовательно форум можно вообще на....р закрывать

Может быть: <a href="#" class="search" name="modal">?

Вообще конечно было бы неплохо увидеть это на реальной страничке.

Да нет, ссылка вроде правильна..... твой вариант не срабатывает

На компе все это дело лежит.....

В нете наверно придется искать другой вариант окна на jquery

Edited by gesandte
Link to comment
Share on other sites

  • 0
спасибо тебе за хороший совет, сам бы не додумался :)

Кстати тогда ты эту фразу можеш отнести практически ко всем топикам данного форума, а следовательно форум можно вообще на....р закрывать

Да нет, ссылка вроде правильна..... твой вариант не срабатывает

На компе все это дело лежит.....

В нете наверно придется искать другой вариант окна на jquery

Да, в нете полно этих модальных окон, я только вот недавно искал, но лучше не на jquery, а на js - итог меньше кода.

Link to comment
Share on other sites

  • 0
Да, в нете полно этих модальных окон, я только вот недавно искал, но лучше не на jquery, а на js - итог меньше кода.

Ну да, их там вагон, сам раньше пробовал не на jquery такие. Щас просто несколько фич хочю сделать(точнее пару уже сделал) на jquery, вот всплывающее окно, это последняя, поэтому и хочю на ней зделать, т.к она уже используется у меня

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy