Jump to content
  • 0

Помогите разобраться с примером всплывающего окна

alleclf

Asked by alleclf,

 Share

Question

alleclf Enthusiast

alleclf

Posted
Posted

Пример реализован вот так: http://jsfiddle.net/vend3tta/SE4tS/

по ссылке всё работает, пробую реализовать сам - не работает

 

Вот код html файла:

<!DOCTYPE html><head><title>CSS3 Javascript</title><link rel="stylesheet" href="css/style.css"><script type="text/javascript">p = $('.popup__overlay')$('#popup__toggle').click(function() {    p.css('display', 'block')})p.click(function(event) {    e = event || window.event    if (e.target == this) {        $(p).css('display', 'none')    }})$('.popup__close').click(function() {    p.css('display', 'none')})</script></head><body><p><input type="button" value="Popup!" id="popup__toggle" /></p><!--[if lt IE 9]><div class="popup__overlay popup__overlay_ie"></div><![endif]--><div class="popup__overlay">    <div class="popup">        <a href="#" class="popup__close">X</a>        <h2>Welcome!</h2>        <p>Please enter your login and password to continue</p>        <div class="popup-form__row">            <label for="popup-form_login">Login</label>            <input type="text" id="popup-form_login" value="" />        </div>        <div class="popup-form__row">            <label for="popup-form_password">Password</label>            <input type="password" id="popup-form_password" value="" />        </div>        <input type="button" value="Log in" />    </div>    <!--[if lt IE 9]><div class="popup__valignfix"></div><![endif]--></div></body></html>

Ну и вот стили, файл style.css:

html {    min-height: 100%    }body {    min-height: 100%;    background: #fff;    font: 14px/125% Tahoma;    }p {    margin: 1em 0;    text-align: center    }.popup__overlay {    display: none;    position: fixed;    left: 0;    top: 0;    width: 100%;    height: 100%;    background: rgba(0,0,0,.7);    text-align: center    }    .popup__overlay:after {        display: inline-block;        *display: inline;        *zoom: 1;        height: 100%;        width: 0;        vertical-align: middle;        content: ''        }    /* Added for IE<9 compatibility */    .popup__overlay_ie {        background: #000;        opacity: .7;        filter: alpha(opacity=70)        }.popup {    display: inline-block;    *display: inline;    *zoom: 1;    position: relative;    max-width: 80%;    padding: 20px;    border: 5px solid #fff;    border-radius: 15px;    box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);    background: #fff;    vertical-align: middle    }/* Added instead of :after pseudoelement */.popup__valignfix {    display: inline-block;    *display: inline;    *zoom: 1;    width: 0;    height: 100%;    vertical-align: middle    }.popup-form__row {    margin: 1em 0    }label {    display: inline-block;    *display: inline;    *zoom: 1;    width: 120px;    text-align: left    }input[type="text"], input[type="password"] {    margin: 0;    padding: 2px;    border: 1px solid;    border-color: #999 #ccc #ccc;    border-radius: 2px    }input[type="button"] {    padding: 6px 16px;    border: 0;    border-radius: 2px;    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);    box-shadow:         inset 0 1px 1px rgba(255,255,255,.3);    cursor: pointer;    background: #444;    background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);    background:    -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);    background:     -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);    background:      -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);    background:         linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);    color: #fff    }.popup__close {    display: block;    position: absolute;    top: -20px;    right: 10px;    width: 12px;    height: 12px;    padding: 8px;    border: 5px solid #fff;    border-radius: 50%;    -webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4),                              0 3px 3px     rgba(0,0,0,.4);    box-shadow:         inset 0 2px 2px 2px rgba(0,0,0,.4),                              0 3px 3px     rgba(0,0,0,.4);    cursor: pointer;    background: #fff;    text-align: center;    font-size: 12px;    line-height: 12px;    color: #444;    text-decoration: none;    font-weight: bold    }    .popup__close:hover {        background: #ddd        }

Что не так сделал? В чём ошибка?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
alleclf Enthusiast

alleclf

Posted
  • Author
Posted
у, как бы, не мешало бы подключить сам jQuery, для начала, раз уж хотите им воспользоваться

я 1.7 не нашел, подключал другие, какие точно не помню, вроде 1.7.2 самый ближний был

Link to comment
Share on other sites
  • 0
hypnocolor Explorer

hypnocolor

Posted
Posted
у, как бы, не мешало бы подключить сам jQuery, для начала, раз уж хотите им воспользоваться

я 1.7 не нашел, подключал другие, какие точно не помню, вроде 1.7.2 самый ближний был

Локально подключали? Почему тогда этого в вашем коде не видно?

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
Go to question listing
×
×
  • 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

  I accept