Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Ламерские вопросы » Модальное окно

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

65uvabit 17.07.2014 Модельное окно Все вопросы » Ламерские вопросы 3099

вопрос

Как сделать модельное окно как на этом сайте у меня шаблон на Bootstrap 3

Ответа пока нет

8 комментариев

Юзер

1599

FastFud - 2015-06-3017 июля 2014 14:39 - #31944

модельное окно :D
А посмотреть стили этих окон на этом сайте нельзя было ?)

Гости

119

sr.green - 2015-06-3017 июля 2014 16:45 - #31948

спалился парень!

Юзер

65uvabit - 2015-06-3018 июля 2014 09:30 - #31991

в каком смысле

Юзер

saratovstil - 2015-06-3017 июля 2014 21:55 - #31967

чем стандарт хуже?

Юзер

1599

FastFud - 2015-06-3017 июля 2014 21:56 - #31968

saratovstil, У каждого свои вкусы!

Юзер

vpkach - 2015-06-3019 июля 2014 21:05 - #32172

Надо же так нагло об этом писать, что уже нет фантазии что бы сделать что-то свое, а не копировать чужой труд ?

Юзер

795

D0Gmatist - 2015-06-3019 июля 2014 21:24 - #32175

Цитата: vpkach

Надо же так нагло об этом писать, что уже нет фантазии что бы сделать что-то свое, а не копировать чужой труд ?

не критикуйте ... если человеку понравилось то как выглядят эти окна ...то почему ему их не хотеть?

Юзер

494

Gopr - 2015-06-3019 июля 2014 23:07 - #32181

А что если так?)

Показать / Скрыть текст

  /*---Диалоговые и всплывающие окна jQuery UI---*/
.ui-helper-clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.ui-helper-clearfix { display: inline-block; }

* html .ui-helper-clearfix { height: 1%; }

.ui-helper-clearfix { display: block; }


.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button, 
.ui-widget {
  font-size: 11px;
  line-height: 16px;
  }

.ui-widget button {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  margin-left: 10px;
  font-size: 13px;
  line-height: 18px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  border: 1px solid #cccccc;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  *margin-left: .3em;
  }
  .lt-ie9 .ui-widget button {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  }
  .ui-widget button:hover {
    color: #333333;
    text-decoration: none;
    background-color: #e6e6e6;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
  }
  .ui-widget button.ui-state-focus {
   background-color: #659a22;
  background-image: -moz-linear-gradient(top, #9ac92c, #659a22);
  background-image: -ms-linear-gradient(top, #9ac92c, #659a22);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#9ac92c), to(#659a22));
  background-image: -webkit-linear-gradient(top, #9ac92c, #659a22);
  background-image: -o-linear-gradient(top, #9ac92c, #659a22);
  background-image: linear-gradient(top, #9ac92c, #659a22);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
  text-shadow:1px 1px #659a22 !important;
  color: #fff;
  }
  .lt-ie9 .ui-widget button.ui-state-focus {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ac92c', endColorstr='#659a22', GradientType=0);
    }
  .ui-widget button.ui-state-focus:hover {
    background-color: #659a22;
    }
.ui-widget-content {
  background: #fff;
  border: 1px solid #d1d1d1;
  color: #222;
}

.ui-widget-header {
  color: #555555;
  font-size: 18px;
  font-family: kelson_sans_rulight, sans-serif;
  font-weight: bold;
  border-bottom: solid 1px #d1d1d1;
  font-weight: 300;
  }
  .lt-ie9 .ui-widget-header {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 );
  }

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
  color: #323232;
  text-decoration: none;
}

.ui-state-hover a, .ui-state-hover a:hover {
  color: #7daf27;
  text-decoration: none;
}
.ui-icon { 
  display: block; 
  width: 20px; 
  height: 20px; 
  text-indent: -99999px; 
  overflow: hidden; 
  background-image: url("http://dle-faq.ru/templates/newfaq/assets/img/glyphicons-halflings.png");
  line-height: 14px;
  }

.ui-icon-close { background-position: -309px 2px;}

.ui-icon-closethick { background-position: -309px 2px; }

.ui-button .ui-button-text { display: block; }

.ui-dialog {
  overflow: hidden;
  position: absolute;
  width: 300px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: .2em;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.ui-dialog .ui-dialog-titlebar {
  padding: .5em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: .1em 16px .2em 0;
}

.ui-dialog .ui-dialog-titlebar-close {
  height: 19px;
  margin: -10px 0 0 0;
  padding: 1px;
  position: absolute;
  right: .3em;
  top: 50%;
  width: 20px;
}

.ui-dialog .ui-dialog-titlebar-close span {
  display: block;
}

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus {
  padding: 0;
  border: solid 1px #7daf27;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.ui-dialog .ui-dialog-content {
  background: none;
  border: 0;
  overflow: hidden;
  padding: 10px;
  position: relative;
  zoom: 1;
}

.ui-dialog .ui-dialog-buttonpane {
  background-image: none;
  border-width: 1px 0 0 0;
  padding: 10px;
  text-align: left;
}

.ui-dialog .ui-dialog-buttonpane button {
  float: right;
}

.ui-dialog .ui-resizable-se {
  bottom: 3px;
  height: 14px;
  right: 3px;
  width: 14px;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}
#dlepopupmessage {
  font-size: 16px;
  line-height: 20px;
  color: #7daf27;
  }
  #newpm {
  font-size: 14px;
  line-height: 18px;
  }

Похожие вопросы

Вынести панель управления в модальное окно

07.11.2011 Vozemz Ламерские вопросы

Модальное окно не работает

14.01.2013 MotorKA Шаблоны (TPL), jQuery, Общие вопросы по PHP, Ламерские вопросы

Не работают стандартные js-скрипты

03.02.2013 BPlay Ламерские вопросы

Оформление диалогового окна под bootstrap

11.02.2014 selmers Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Ламерские вопросы

Одна любая зафиксированная новость в модальном окне

24.02.2014 rastamansky Ламерские вопросы

Как организовать всплывающее окно

10.07.2014 Elena Общие вопросы, jQuery, Ламерские вопросы

Новое окно

02.09.2014 burnozavr Ламерские вопросы

Как вывести закладки пользователя в модальное окно?

12.02.2015 LafLer Ламерские вопросы

Как поставить картинку в окно добавления комментариев?

11.04.2015 morozis Ламерские вопросы

Как осуществить всплывающее окно при наведении на ник?

30.06.2015 andros0705 Ламерские вопросы

Последние события

lutskboy | Как в description вставить значение доп. ... ¹

lutskboy
Как в description вставить значение доп.поля?
Вчера, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html

derebas | Как реализовать кнопку "Поделиться" как ... ¹

derebas
Как реализовать кнопку "Поделиться" как на Плей Маркете?
Вчера, 09:39

Ну если на скорую руку то примерно так

<style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>

doktorpull | GeoIP - показ информации в зависимости о ... ¹

doktorpull
GeoIP - показ информации в зависимости от страны посетителя сайта
17-04-2024, 21:53

Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
Gordi | Telegram Sender ¹²

Gordi
Telegram Sender
16-04-2024, 15:47

купил. Модуль классный! Автору большая признательность!
TeraMoune | Как вывести тайтл и дискрипшен по маске ... ¹

TeraMoune
Как вывести тайтл и дискрипшен по маске в категориях?
14-04-2024, 00:36

Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
zawibis | Как настроить редирект на внешние сайты? ¹

zawibis
Как настроить редирект на внешние сайты?
13-04-2024, 14:53

Нашёлся ответ.
Нужно в настройках группы отключить параметр

Автоматическая замена ссылок [url] в тег [leech]
При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
TeraMoune | Как решить проблему с /xfsearch/значение ... ⁵

TeraMoune
Как решить проблему с /xfsearch/значение?
12-04-2024, 11:53

Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:34

А вот прикол то в том, что это коснулось только author
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:31

может быть не один только author. и другие поля. как знать куда перенаправлять
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:25

Проблема заключается не в регистре, а в названии /author/ пропадает, и получается так, что ссылки дублируются. Как сделать редирект с дубля /xfsearch/Имя Фамилия на правильный адрес /xfsearch/author/имя фамилия ?

наверх