文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用步骤覆盖注册表

问使用步骤覆盖注册表
EN

Stack Overflow用户
提问于 2017-01-25 12:08:59
回答 1查看 934关注 0票数 2

我一直在努力，但我就是做不到。我想有一个多步骤的注册表，但作为一个网站上的覆盖打开。

我一直在玩一些东西，但似乎就是不能把它弄对。第2步和第3步位于同一覆盖层上：

​

或者步骤2和3在下面，但在阴影部分。

我觉得自己像个笨蛋，因为这应该很容易，但无论我做什么，它都不能工作(我甚至不能让JSFiddle运行：

代码语言：javascript
复制
<!DOCTYPE HTML>

JSfiddle

请帮帮忙，因为我真的很想把它写下来并理解它。

javascript
jquery
html
css
overlay
EN

回答 1

Stack Overflow用户

发布于 2017-01-25 12:35:19

工作JSfiddle。

我认为你的代码在评论中提到的24行的小打字错误是不起作用的。

​

代码语言：javascript
复制
$(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');
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41843226

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档