Question

我试图寻找答案，并尝试了许多答案，但无法通过。我的模态弹出有问题。我想在我的模态弹出窗口显示10秒倒数计时器。十秒钟结束后，模态弹出窗口必须消失。现在，尝试这样做我面临两个问题。

我试过的计时器无效。
模态弹出窗口未正确显示。

模态弹出的问题在于：

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head   content must come *after* these tags -->
  <meta name="description" content="">
   <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
    <link rel="stylesheet" type="text/css" href="css/ff.master.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="css/owl.transitions.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">



<!-- Custom styles for this template -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">       </script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>var cid = '1679091c5a880faf6fb5e6087eb1b2dc';</script>
   </head>

  <body onLoad="$('#myModal').modal('show');">

<div class="site-wrapper">


     <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead clearfix" align="center">
        <div class="inner">
          <h3><img src="img/logo.png" class="img-rounded" width="250"     height="100"</h3>
        </div>
      </div>

      <div class="inner cover" align="center">

        <h5 class="m-b fs-14">It's easy to get started. Call reception or ask waiter<br> for internet coupon. Enter the credentials recieved below and you will be online in no time.</h5>


        $(if chap-id)
          <form name="sendin" action="$(link-login-only)" method="post">
            <input type="hidden" name="username" />
            <input type="hidden" name="password" />
            <input type="hidden" name="dst" value= />
            <input type="hidden" name="popup" value="true" />
          </form>

          <script type="text/javascript" src="js/md5.js"></script>
          <script type="text/javascript">
          <!--
              function doLogin() {
            document.sendin.username.value = document.login.username.value;
            document.sendin.password.value = hexMD5('$(chap-id)' +    document.login.password.value + '$(chap-challenge)');
            document.sendin.submit();
            return false;
              }
          //-->
          </script>
        $(endif)



<h3>Enter the credentials below</h3>
        <div class="b p img-rounded">
        <form name="login" class="form-inline"action="$(link-login-only)" method="post"
          $(if chap-id) onSubmit="return doLogin()" $(endif)>
          <input type="hidden" name="dst" value="" />
          <input type="hidden" name="popup" value="true" />
          <div class="form-group">
            <input type="text" class="form-control input-lg col-md-4" placeholder="Username" name="username" value="$(username)">
          </div>
          <div class="form-group">
            <input type="text" class="form-control input-lg col-md-4" placeholder="Password" name="password">
          </div>
          <button type="submit" class="btn btn-success btn-lg">Login</button>
        </form>

        $(if error)<div class="text-center text-danger text-error m-t">$(error)</div>$(endif)

        </div>

      </div>

      <br>
      <div class="mastfoot" align="center">
        <div class="inner">

        </div>
      </div>

    </div>

  </div>

</div>

        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script src="js/owl.carousel.min.js"></script>
        <script src="js/mousescroll.js"></script>
        <script src="js/smoothscroll.js"></script>
        <script src="js/jquery.prettyPhoto.js"></script>
        <script src="js/jquery.isotope.min.js"></script>
        <script src="js/jquery.inview.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/main.js"></script>   


       <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/jquery.form.min.js"></script>
        <script src="js/jquery-validate.bootstrap-tooltip.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="js/ie10-viewport-bug-workaround.js"></script>



    <script>
        $(document).ready(function() {
          $('#sms-form').load('http://fireflywifi.co.in/register/index/'+cid);

          $('body').on('click', '#smsBtn', function() {
            $('#sms-form form').validate({
              submitHandler: function(form) {
                $('#smsBtn').html('<i class="glyphicon glyphicon-share-alt"></i> Sending...');
                $('#smsBtn').attr('disbaled', 'disabled');
                $(form).ajaxSubmit({
                  target: '#sms-form'
                });
                return false;
              },
              tooltip_options: {
                '_all_': { placement: 'bottom' }
              },
              highlight: function(element) {
                  $(element).closest('.form-group').addClass('has-error');
              },
              unhighlight: function(element) {
                  $(element).closest('.form-group').removeClass('has-error');
              }
            });
          });
        });
        </script>



     <script type="text/javascript">


        var Timer;
        var TotalSeconds;


        function CreateTimer(TimerID, Time) 
        {
            Timer = document.getElementById('TimerID').innerHTML;
            TotalSeconds = Time;

            UpdateTimer()
            window.setTimeout("Tick()", 1000);
        }

        function Tick()
        {
            if (TotalSeconds <= 0) 

            return;
            TotalSeconds -= 1;
            UpdateTimer()
            window.setTimeout("Tick()", 1000);
        }

        function UpdateTimer() 
        {
            var Seconds = TotalSeconds;

            var Days = Math.floor(Seconds / 86400);
            Seconds -= Days * 86400;

            var Hours = Math.floor(Seconds / 3600);
            Seconds -= Hours * (3600);

            var Minutes = Math.floor(Seconds / 60);
            Seconds -= Minutes * (60);


            var TimeStr = ((Days > 0) ? Days + " days " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


            document.getElementById("TimerID").innerHTML = TimeStr;
        }


        function LeadingZero(Time)
            {

            return (Time < 10) ? "0" + Time : + Time;
            }

       </script>

        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-  labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
        <script type="text/javascript">window.onload =CreateTimer("timer", 30)</script>
        <h4>You will be connected in <button style="text-align:center" id="timer" style="text-align:center"> </button> seconds </h4>
        </div>
         <div class="modal-body">
         <form id="form" class="form" name="form" action="sendemail.php" method="post">

         <div class="content">
         <div class="intro"></div>
         <div id="section0">

         </div>

         </div>
         </form>
         </div>
         <div class="modal-footer">

         <button type="button" class="btn btn-default" data-  dismiss="modal">Close</button>
              </div>
            </div>
          </div>
         </div>

          </body>
          </html>



 [1]: https://dl.dropboxusercontent.com/u/94517486/screenshot.png

Answer 1

你有三个问题

您的模态缺少开始<div class="modal-header">标记，这就是为什么模态混乱（几乎总是由丢失或额外标记引起）
您的JavaScript调用Timer = document.getElementById('TimerID').innerHTML;和document.getElementById("TimerID").innerHTML = TimeStr;，但您的html已id="timer"，更改其中一个以便匹配
模式上的关闭按钮有data- dismiss="modal">Close</button> 注意data- dismiss 中的空格。摆脱那个空间或按钮不会关闭模态。

关于你的计时器，因为你真正想要的是从给定的秒数开始的倒计时，你现在所拥有的就是过度杀戮。一个简单的递归函数就足够了：

function startCountdown(seconds) {
    $('#timer').html(seconds); // set the text to the current value of seconds
    if(seconds>0) setTimeout(function(){ startCountdown(seconds - 1); }, 1000); // if we havent hit 0 yet, wait 1 second and call the function again after subtracting 1 from "seconds"
    else{
        $('#myModal').modal('hide');
    }
}
startCountdown(10); // call the function with some number of seconds to countdown from

Bootstrap 3模态背景落在模态前面

1 个答案:

Here's a working jsFiddle