Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Hyliop
1 / 1 / 2
Регистрация: 13.02.2015
Сообщений: 98
#1

Как добавить модальное окно? - HTML, CSS

13.06.2015, 20:03. Просмотров 174. Ответов 0
Метки нет (Все метки)

Привет всем. Подскажите, как можно добавить модальное окно для ввода информации о клиента при нажатии на кнопку? Но, если поля не корректны, то выводится сообщение о не выбранном значении, иначе - показывать модальное окно?
Вот такой пример кода сейчас:
http://www.cyberforum.ru/html/thread2110596.html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<form name="form"  id="config" method="post" action="index.php" enctype="multipart/form-data">                  
<table id="myTab" class='display table table-bordered'>
<tr>                    
<td>Процессор</td>
<td></td>               
<td> 
<div class='newselect'>
<select class='chosen' id='chosenmak' style='width:540px;' name='maker'> 
<option value='' data-price=''>-- Выбрать --</option>
<?php 
foreach ($arr_get as $value)  {
echo '<option data-price="'.$value['Price'].'" data-image="'.$value['photo'].'" value="'.$value['ID'].'">'.$value['Manufacture'].'</option>'; 
}
?>
</select>                         
</div>
</td> 
</tr>
</table>    
<table class='display table table-bordered'>
<tr>
<td>    
<button class="btn btn-danger" name="clear"><i class="icon-remove"></i> Очистить всё</button>       
</td>               
<td class="sum">
<h4>Итого стоимость основных компонентов <span id="sum_main">0.00 <sup>грн.</sup></span></h4>
<input type="hidden" id="test" name="test" value=""/>
</td>
<td>    
<button class="btn btn-success" value="1" name="korz"><i class="icon-shopping-cart"></i> Оформить заказ</button>        
 
</td>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {  
$("#config").submit(function() {        
var send_form   = 1;        
var cpu         = $("#chosenmak").val();
 
$("#create_error").html("");
if (cpu == "") {
    $("#create_error").append("<div class='alert alert-block alert-error fade in' id='alert'><button type='button' class='close' data-dismiss='alert'>Г—</button><h4 class='alert-heading'>Не выбран процессор</h4></div>"); 
    window.scrollTo(0, $("#alert").offset().top);
    send_form = 0; 
}                                                                                                
if (send_form == 1) { 
    temp = window.confirm('Собрать конфигурацию?'); 
    if (temp) 
    { return true; }
else { 
     return false; } 
 
    } else {
 
 return false;  
 
}   
return false;
});         
});
Нашёл модальное окно для BS, но не могу настроить. Оно сразу открывается при клике на кнопку даже, если ничего не выбрано, а надо, чтобы показывало сначала ошибку, и если всё ок, то запускалось модальное.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
                                        <h4 class="modal-title">Form Tittle</h4>
                                    </div>
                                    <div class="modal-body">
 
                                        <form role="form">
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">Email address</label>
                                                <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">Password</label>
                                                <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputFile">File input</label>
                                                <input type="file" id="exampleInputFile3">
                                                <p class="help-block">Example block-level help text here.</p>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox"> Check me out
                                                </label>
                                            </div>
                                            <button type="submit" class="btn btn-default">Submit</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.06.2015, 20:03
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Как добавить модальное окно? (HTML, CSS):

как сделать чтобы видео с ютуба помещенное на сайт не перекрывало модальное окно?
Дело такое - загрузил видео с ютуба на сайт - http://capitalperm.com через...

Не закрывается модальное окно
Помогите разобраться с кодом.Установил на сайт модальное окно,открывается по...

модальное окно css
Все знают что ie не поддерживает traget как решить проблему, кто сталкивался...

Модальное окно bootstrap
&lt;DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script src=&quot;jquery-1.8.3.js&quot;&gt;&lt;/script&gt; &lt;link...

Не работает модальное окно
Использую Bootstrap. Блок с модальным окном находится после тега footer перед...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.06.2015, 20:03
Привет! Вот еще темы с решениями:

Не работает модальное окно
Добрый день! Понадобилось скопировать вёрстку сайта : http://mtinv.ru...

Модальное окно регистрации
Помогите пожалуйста сделать модальное окно регистрации на сайте чтобы оно не...

Самое простое модальное окно
Допустим берем пустой Html документ, в нем нужно создать что-то подобное...

Модальное окно появляеться и исчезает
Доброго времени суток. У меня такая проблема, не могу использовать модальное...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru