2
Q
覆蓋登記表與步驟
A
回答
1
工作JSfiddle。
我覺得你的代碼只是如評論中提到的那樣，沒有在第24行的那個小錯字上工作。
$(document).ready(function() {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
function closeNav() {
document.getElementById("myNav").style.height = "0%";
};
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});body {
margin-top: 40px;
}
.overlay {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
left: 25%;
background-color: rgb(225, 225, 225);
background-color: rgba(225, 225, 225, 0);
overflow-y: hidden;
transition: 0.5s;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
/* my code */
pointer-events: none;
}
.modal-dialog {
z-index: 9999;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p class="text-center"><a href="#" class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#login-modal">Let's Begin</a></p>
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Step 1</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Step 2</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<!--Top section showing 1, 2 3-->
<div class="modal-header" align="center">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name" />
</div>
<div class="form-group">
<label class="control-label">Surname</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Surname" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter Address"></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>相關問題
- 1. AutowiringFailedException覆蓋FOSUserBundle登記表時
- 2. 覆蓋autofac登記插件
- 3. 如何覆蓋Spree結帳表單和步驟流程？
- 4. 覆蓋與覆蓋
- 5. 覆蓋定製登記約定3
- 6. 多個步驟登記表單=>多個請求？ （Laravel）
- 7. 與步驟（）
- 8. sqlalchemy燒瓶返回記錄與步驟
- 9. 如何定製/覆蓋Travis CI中的「git clone」步驟？
- 10. 是否可以覆蓋behat上下文中的步驟定義？
- 11. Jenkins覆蓋構建步驟中的參數值
- 12. jmockit覆蓋率報告步驟從ant build.xml文件
- 13. 如何覆蓋SCSS for循環中的整數步驟（從*到*）
- 14. 鏈表步驟
- 15. 步驟與的IntelliJ
- 16. 覆蓋與CSS
- 17. 與覆蓋
- 18. 骨幹SQLite同步覆蓋
- 19. Java同步覆蓋值
- 20. 如何覆蓋異步CSS？
- 21. 覆蓋同步方法
- 22. JQuery表單步驟與驗證
- 23. fosuserbundle覆蓋登錄操作
- 24. FOSUserBundle覆蓋登錄邏輯
- 25. 覆蓋登錄重定向
- 26. 當我將手柄從步驟0移動到步驟50時，如何覆蓋Ajax Slider Extender的軌道，並將這些步驟塗成灰色？
- 27. 代表覆蓋
- 28. 覆蓋表面
- 29. 錶行覆蓋
- 30. 分析代碼與步驟
的JS提琴需要您啓用了jQuery，編輯您的帖子 –
試過了還是一樣:( –
您也有一個額外的'）'上線24 –