Правильные модальные окна (arcticmodal) проблема установки

xoff · August 16, 2013

Почему в IE не работает когда я сам делаю а скаченный пример - спокойно работает в IE, что делаю не так?

Вот полностью html:


<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>ГК "Спектр-СБ" :: Системы безопасности, видеонаблюдения и контроля доступа в Самаре - Главная</title>

<!-- jQuery -->
<script src="//yandex.st/jquery/1.9.1/jquery.min.js"></script>

<!-- arcticModal -->
<script src="./jquery.arcticmodal-0.3.min.js"></script>
<link rel="stylesheet" href="./jquery.arcticmodal-0.3.css">

<!-- arcticModal theme -->
<link rel="stylesheet" href="./themes/simple.css">
 <link rel="stylesheet" type="text/css" href="./modal.css">
</head>

<body>

<span class="m-dotted" id="example2">Окно с большой высотой</span>
                    <script>
                        $('#example2').click(function() {
                            var c = $('<div class="box-modal" />');
                            c.html($('.b-text').html());
                            c.prepend('<div class="box-modal_close arcticmodal-close">закрыть</div>');
                            $.arcticmodal({
                                content: c
                            });
                        });
                    </script>
<div class="b-text g-hidden">
<div class="zakaz">
                <center><h2>Оформление заказа</h2></center>
<form id="zakaz" action="../action.php" name="zakaz" method="POST">

<p style="font-size:smaller; margin:10px;">Поля, отмеченные <span style="color:red">*</span> обязательны для заполнения</p>
<table width="100%">
<tbody>
<tr>
    <td align="right" width="25%">Модель:</td>
    <td><input type="text" name="model" size="30" maxlength="30" value="STV-S 320" readonly> Кол-во:<input type="text" name="kol" size="2" maxlength="30" value="1">       Цена: <b><span class="toolTip" title="Предоставляются скидки для торговых и монтажных организаций" style="">2049р</span></b><br/>Внимание: Цена указана за <span style="color:blue">единицу товара</span></td>

</tr>
<tr>
    <td align="right" width="25%">Имя<span style="color:red">*</span>:</td>
    <td><input type="text" name="name" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Фамилия<span style="color:red">*</span>:</td>
    <td><input type="text" name="surname" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">E-mail<span style="color:red">*</span>:</td>
    <td><input type="text" name="email" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Должность:</td>
    <td><input type="text" name="post" size="30" maxlength="60" value=""></td>
</tr>
</tbody></table>
<table width="100%">
<tbody><tr>
    <td align="right" width="25%">Телефон<span style="color:red">*</span>:</td>
    <td><input type="text" name="phone" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Факс:</td>
    <td><input type="text" name="fax" size="30" maxlength="30" value=""></td>
</tr>
</tbody></table>
<table width="100%">
<tbody><tr>
    <td align="right" width="25%">Организация:</td>
    <td><input type="text" name="company" size="45" maxlength="60" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Сфера деятельности:</td>
    <td><input type="text" name="activity" size="45" maxlength="60" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">ИНН:</td>
    <td><input type="text" name="inn" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">КПП:</td>
    <td><input type="text" name="kpp" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Р/с:</td>
    <td><input type="text" name="rs_bank" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Банк:</td>
    <td><input type="text" name="bank" size="45" maxlength="120" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">К/с:</td>
    <td><input type="text" name="ks_bank" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">БИК:</td>
    <td><input type="text" name="bik" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">ОКПО:</td>
    <td><input type="text" name="okpo" size="30" maxlength="30" value=""></td>
</tr>
</tbody></table>
<p>Пожалуйста, укажите как и где Вам будет удобнее получить Ваш заказ<span style="color:red">*</span>:</p>
<table width="100%">
  <tbody>
    <tr>
      <td width="12%">Самовывоз: </td>
      <td>
      <input type="radio" name="deliver" value="Самовывоз" checked="checked">
        Офис "Спектр-сб": ул.Ново-Садовая, 303 А<br>
</td>
    </tr>
  </tbody>
</table>
<table width="100%">
  <tbody><tr>
    <td width="12%">
    Доставка:
    </td>
    <td>                            
      <p>
        <input type="radio" name="deliver" value="ООО Деловые линии">
        ООО "Деловые линии" (<a href="http://www.dellin.ru" target="_blank">http://www.delin.ru</a>)
        <br />
        <input type="radio" name="deliver" value="ООО Автотрейдинг" />
ООО "Автотрейдинг" (<a href="http://www.ae5000.ru/" target="_blank">http://www.ae5000.ru</a>) 
<br />
<input type="radio" name="deliver" value="ООО Байкал-Сервис" />
ООО "Байкал-Сервис" (<a href="http://www.baikalsr.ru/" target="_blank">http://www.baikalsr.ru</a>) <br />
<input type="radio" name="deliver" value="ООО ЖелдорЭкспедиция" />
ООО "ЖелдорЭкспедиция" (<a href="http://www.jde.ru/" target="_blank">http://www.jde.ru</a>)      
<br />
<input type="radio" name="deliver" value="см. строку Дополнительная информация" />
Другое (Укажите ваш вариант в поле "Дополнительная информация") <br />
      </p>
    <tr>
</tr>
</tbody></table>
<table width="100%">
<tbody><tr>
    <td align="right" width="25%">Город<span style="color:red">*</span>:</td>
    <td><input type="text" name="city" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Область:</td>
    <td><input type="text" name="state" size="30" maxlength="30" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Страна:</td>
    <td><input type="text" name="country" size="30" maxlength="30" value=""></td>

</tr>
<tr>
    <td align="right" width="25%">Почтовый индекс:</td>
    <td><input type="text" name="zip" size="6" maxlength="6" value=""></td>
</tr>
<tr>
    <td align="right" width="25%">Адрес:</td>
    <td><textarea name="adres" cols="40" rows="3"><textarea></td>
</tr>
</tbody></table>
<table width="100%">
<tbody><tr>
    <td align="right" width="25%">Дополнительная информация:</td>
    <td><textarea name="additional" cols="40" rows="6"><textarea></td>
</tr>
</tbody></table>
<table width="100%">
<tbody><tr>
    <td width="25%"> </td>
    <td><input class="buy" type="submit" value="Отправить"></td>
</tr>
</tbody></table>
</form>
</div>
            </div>


</body></html>

Вот подключенные файлы

jquery.arcticmodal-0.3.min.js:


/*

 arcticModal вЂ” jQuery plugin
 Version: 0.3
 Author: Sergey Predvoditelev (sergey.predvoditelev@gmail.com)
 Company: Arctic Laboratory (http://arcticlab.ru/)

 Docs & Examples: http://arcticlab.ru/arcticmodal/

 */
(function(d){var g={type:"html",content:"",url:"",ajax:{},ajax_request:null,closeOnEsc:!0,closeOnOverlayClick:!0,clone:!1,overlay:{block:void 0,tpl:'<div class="arcticmodal-overlay"></div>',css:{backgroundColor:"#000",opacity:0.6}},container:{block:void 0,tpl:'<div class="arcticmodal-container"><table class="arcticmodal-container_i"><tr><td class="arcticmodal-container_i2"></td></tr></table></div>'},wrap:void 0,body:void 0,errors:{tpl:'<div class="arcticmodal-error arcticmodal-close"></div>',autoclose_delay:2E3,
ajax_unsuccessful_load:"Error"},openEffect:{type:"fade",speed:400},closeEffect:{type:"fade",speed:400},beforeOpen:d.noop,afterOpen:d.noop,beforeClose:d.noop,afterClose:d.noop,afterLoading:d.noop,afterLoadingOnShow:d.noop,errorLoading:d.noop},j=0,e=d([]),m={isEventOut:function(a,{var c=!0;d(a).each(function(){d(b.target).get(0)==d(this).get(0)&&(c=!1);0==d(b.target).closest("HTML",d(this).get(0)).length&&(c=!1)});return c}},f={getParentEl:function(a){var b=d(a);return b.data("arcticmodal")?b:(b=
d(a).closest(".arcticmodal-container").data("arcticmodalParentEl"))?b:!1},transition:function(a,b,c,e){e=void 0==e?d.noop:e;switch(c.type){case "fade":"show"==b?a.fadeIn(c.speed,e):a.fadeOut(c.speed,e);break;case "none":"show"==b?a.show():a.hide(),e()}},prepare_body:function(a,{d(".arcticmodal-close",a.body).unbind("click.arcticmodal").bind("click.arcticmodal",function(){b.arcticmodal("close");return!1})},init_el:function(a,{var c=a.data("arcticmodal");if(!c){c=b;j++;c.modalID=j;c.overlay.block=
d(c.overlay.tpl);c.overlay.block.css(c.overlay.css);c.container.block=d(c.container.tpl);c.body=d(".arcticmodal-container_i2",c.container.block);b.clone?c.body.html(a.clone(!0)):(a.before('<div id="arcticmodalReserve'+c.modalID+'" style="display: none" />'),c.body.html(a));f.prepare_body(c,a);c.closeOnOverlayClick&&c.overlay.block.add(c.container.block).click(function({m.isEventOut(d(">*",c.body),&&a.arcticmodal("close")});c.container.block.data("arcticmodalParentEl",a);a.data("arcticmodal",c);
e=d.merge(e,a);d.proxy(h.show,a)();if("html"==c.type)return a;if(void 0!=c.ajax.beforeSend){var k=c.ajax.beforeSend;delete c.ajax.beforeSend}if(void 0!=c.ajax.success){var g=c.ajax.success;delete c.ajax.success}if(void 0!=c.ajax.error){var l=c.ajax.error;delete c.ajax.error}var n=d.extend(!0,{url:c.url,beforeSend:function(){void 0==k?c.body.html('<div class="arcticmodal-loading" />'):k(c,a)},success:function({a.trigger("afterLoading");c.afterLoading(c,a,;void 0==g?c.body.html(:g(c,a,;f.prepare_body(c,
a);a.trigger("afterLoadingOnShow");c.afterLoadingOnShow(c,a,},error:function(){a.trigger("errorLoading");c.errorLoading(c,a);void 0==l?(c.body.html(c.errors.tpl),d(".arcticmodal-error",c.body).html(c.errors.ajax_unsuccessful_load),d(".arcticmodal-close",c.body).click(function(){a.arcticmodal("close");return!1}),c.errors.autoclose_delay&&setTimeout(function(){a.arcticmodal("close")},c.errors.autoclose_delay)):l(c,a)}},c.ajax);c.ajax_request=d.ajax(n);a.data("arcticmodal",c)}},init:function(a){a=
d.extend(!0,{},g,a);if(d.isFunction(this))if(void 0==a)d.error("jquery.arcticmodal: Uncorrect parameters");else if(""==a.type)d.error('jquery.arcticmodal: Don\'t set parameter "type"');else switch(a.type){case "html":if(""==a.content){d.error('jquery.arcticmodal: Don\'t set parameter "content"');break}var b=a.content;a.content="";return f.init_el(d(,a);case "ajax":if(""==a.url){d.error('jquery.arcticmodal: Don\'t set parameter "url"');break}return f.init_el(d("<div />"),a)}else return this.each(function(){f.init_el(d(this),
d.extend(!0,{},a))})}},h={show:function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.arcticmodal: Uncorrect call");else{var b=a.data("arcticmodal");b.overlay.block.hide();b.container.block.hide();d("BODY").append(b.overlay.block);d("BODY").append(b.container.block);b.beforeOpen(b,a);a.trigger("beforeOpen");if("hidden"!=b.wrap.css("overflow")){b.wrap.data("arcticmodalOverflow",b.wrap.css("overflow"));var c=b.wrap.outerWidth(!0);b.wrap.css("overflow","hidden");var g=b.wrap.outerWidth(!0);g!=
c&&b.wrap.css("marginRight",g-c+"px")}e.not(a).each(function(){d(this).data("arcticmodal").overlay.block.hide()});f.transition(b.overlay.block,"show",1<e.length?{type:"none"}:b.openEffect);f.transition(b.container.block,"show",1<e.length?{type:"none"}:b.openEffect,function(){b.afterOpen(b,a);a.trigger("afterOpen")});return a}},close:function(){if(d.isFunction(this))e.each(function(){d(this).arcticmodal("close")});else return this.each(function(){var a=f.getParentEl(this);if(!1===a)d.error("jquery.arcticmodal: Uncorrect call");
else{var b=a.data("arcticmodal");!1!==b.beforeClose(b,a)&&(a.trigger("beforeClose"),e.not(a).last().each(function(){d(this).data("arcticmodal").overlay.block.show()}),f.transition(b.overlay.block,"hide",1<e.length?{type:"none"}:b.closeEffect),f.transition(b.container.block,"hide",1<e.length?{type:"none"}:b.closeEffect,function(){b.afterClose(b,a);a.trigger("afterClose");b.clone||d("#arcticmodalReserve"+b.modalID).replaceWith(b.body.find(">*"));b.overlay.block.remove();b.container.block.remove();a.data("arcticmodal",
null);d(".arcticmodal-container").length||(b.wrap.data("arcticmodalOverflow")&&b.wrap.css("overflow",b.wrap.data("arcticmodalOverflow")),b.wrap.css("marginRight",0))}),"ajax"==b.type&&b.ajax_request.abort(),e=e.not(a))}})},setDefault:function(a){d.extend(!0,g,a)}};d(function(){g.wrap=d(document.all&&!document.querySelector?"html":"body")});d(document).bind("keyup.arcticmodal",function(a){var b=e.last();b.length&&b.data("arcticmodal").closeOnEsc&&27===a.keyCode&&b.arcticmodal("close")});d.arcticmodal=
d.fn.arcticmodal=function(a){if(h[a])return h[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof a||!a)return f.init.apply(this,arguments);d.error("jquery.arcticmodal: Method "+a+" does not exist")}})(jQuery);

jquery.arcticmodal-0.3.css:


.arcticmodal-overlay,
.arcticmodal-container { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; }
.arcticmodal-container { overflow: auto; margin: 0; padding: 0; border: 0; border-collapse: collapse; }
*:first-child+html .arcticmodal-container { height: 100% }
.arcticmodal-container_i { height: 100%; margin: 0 auto; }
.arcticmodal-container_i2 { padding: 24px; margin: 0; border: 0; vertical-align: middle; }
.arcticmodal-error { padding: 20px; border-radius: 10px; background: #000; color: #fff; }
.arcticmodal-loading { width: 80px; height: 80px; border-radius: 10px; background: #000 url(loading.gif) no-repeat 50% 50%; }

simple.css:


.box-modal {
    position: relative;
    width: 500px;
    padding: 16px;
    background: #fff;
    color: #3c3c3c;
    font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
    box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);
    border-radius: 6px;
}
.box-modal_close { position: absolute; right: 10px; top: 6px; font-size: 11px; line-height: 15px; color: #999; cursor: pointer; }
.box-modal_close:hover { color: #666; }

И последний modal.css:


.m-dotted { color: #106d9f; border-bottom: 1px dotted #106d9f; cursor: pointer; }
.m-dotted:hover { color: #c00; border-color: #c00; }

/* global */
.g-hidden { display: none; }
.g-clear { font-size: 0; clear: both; }
.g-line { zoom: 1; }
.g-line:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* header */
.b-header { position: relative; padding-top: 32px; }
.b-header .logo { float:  right; padding-right: 12px; }
.b-header .title { float: left; padding: 18px 0 0 0; }
.b-header .title .name { float: left; padding: 4px 12px; background: #86c7e0; color: #fff; font-size: 36px; line-height: 40px; }
.b-header .title .slogan { padding: 4px 0 0 13px; color: #545454; font: italic 18px/22px Georgia, "Century Schoolbook L", Serif; }
.b-header .like { position: absolute; left: 225px; top: 42px; }

/* menu */
.b-menu { padding: 28px 6px 0; font-size: 15px; line-height: 19px; }
.b-menu SPAN { margin: 0 6px; }
.b-menu .cur { color: #000; border: none; cursor: default; }

/* body */
.b-body { display: none; padding: 18px 12px 0; }

/* params */
.b-params { width: 100%; margin-top: 12px; }
.b-params TD { padding: 8px 12px; vertical-align: top; }
.b-params THEAD TD { background: #e4e4e4; font-weight: bold; }
.b-params TBODY TR:nth-child(even) TD { background: #eee; }
.b-params .default { white-space: nowrap; }

Вот как выглядит в норм браузерах:

Вот как в великом и жутком IE:

Тоесть в IE просто див появляется снизу а не по центру ну вообще не как надо, в чем моя ошибка? Где ошибся?

Seko84 · May 21, 2014

Попробуйте здесь

.box-modal {

position: relative;
width: 500px;
padding: 16px;
background: #fff;
color: #3c3c3c;
font: 14px/18px Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
box-shadow: 0 0 0 6px rgba(153, 153, 153, .3);
border-radius: 6px;
}

изменить width: 500px; на чуть побольше

Sign In

Правильные модальные окна (arcticmodal) проблема установки

Question

xoff

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Seko84

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information