0
Я пытаюсь выровнять кнопки да и нет горизонтально и в центре уведомления. Кроме того, я хочу выровнять заголовок и описание над кнопками «да» и «нет» в центре этого уведомления.Горизонтально размещенная кнопка отправки и правильное выравнивание сообщений об ошибках
Вот jsFiddle из ниже:
$(document).ready(function() {
$("#form").validate({
rules: {
time: {
required: true,
number: true
},
title: "required"
},
messages: {
time: "Please enter time(digit) in Seconds",
title: "Please enter the title"
}
});
$("#notify3").hide();
$("#c").click(function(e) {
if ($('#form').valid()) {
$("#notify3").slideDown();
var timeOut = parseInt($("#time").val()) * 1000;
var str = $("#title").val();
var str1 = $('#desc').val();
$('.message').append(str, "</br>", str1);
setTimeout(function() {
$("#notify3").slideUp();
}, timeOut);
}
return false;
});
$("#yes").click(function(e) {
$("#notify3").slideUp();
$(".cy").slideDown(500).delay(1000).slideUp(500);
});
$("#no").click(function(e) {
$("#notify3").slideUp();
$(".cn").slideDown(500).delay(1000).slideUp(500);
});
});#notify3 {
width: 40%;
position: absolute;
top: 50%;
left: 30%;
height: 85px;
background: #CCCCCC;
opacity: 0.8;
display: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-style: solid;
border-color: black;
}
#confirm {
width: 20%;
position: absolute;
top: 0;
left: 40%;
height: 50px;
background: #FFFF00;
opacity: 0.5;
display: none;
}
.message {
font-size: 20px;
width: 100%;
text-align: center;
padding: 10px;
}
.message .y,
.n {
bottom: 0;
right: 0;
}
#form .formelement {
display: inline-block;
padding: 10px 10px;
width: 900px;
}
#form .formelement label {
float: left;
text-align: left;
width: 110px;
}
#form .formelement label.error {
color: red;
display: inline-block;
margin: 4px 0 10px 100px;
padding: 0;
text-align: left;
width: 900px;
}<div id="confirm" class="cy">
<h3 style="text-align:center;">Approved</h2></div>
<div id="confirm" class="cn"><h3 style="text-align:center;">Reject</h2></div>
<div id="notify3">
<div class="message">
<div class="y"><input type="submit" class="submit" value="Yes" id="yes"/>
<input type="submit" class="submit" value="No" id="no"/>
</div>
</div>
</div>
<fieldset>
<form action="" id="form" >
<div class="formelement">
<label for="time">Time(in Sec)* : </label>
<input type="text" name="time" id="time"/>
</div>
<div class="formelement">
<label for="title">Title* : </label>
<input type="text" name="title" id="title"/>
</div>
<div class="formelement">
<label for="desc">Description : </label>
<input type="text" name="desc" id="desc"/>
</div>
<div class="formelement">
<input type="submit" value="Confirm" class="submit" id="c"/>
</div>
</form>
</fieldset>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="valid.js"></script>
просто примечание стороны, попробуйте нажать 'Подтвердить' несколько раз;) –
[попробовать это] (http://jsfiddle.net/fwsk1rq4/ 2 /) - я сделал ваш padding в вашем классе сообщений только сверху, а затем добавил 0 padding/margin в y и n class –
@MrCoder Haha ... dat был запросом m nxt ... bdw может u plzz предложить мне некоторые изменения для удаления нескольких записей в re подтверждают ... – user1702