CODEWITHSUNDEEP
jquerybootstrap-modal
Faheem Rasheed
Faheem Rasheed

Reputation: 49

Bootstrap 3 modal backdrop falls in front of modal

I tried to search for an answer and also tried many answers but couldn't get through. I have an issue with my modal pop up.I want to display a 10 second countdown timer on my modal pop up.After the ten seconds are over the modal pop up must disappear. Now , trying to do this i face two issues.

  1. The timer i tried isn't working.
  2. Modal Pop Up isn't displayed properly.

The Issue with the modal pop up is here :

enter image description here

<!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

Upvotes: 1

Views: 1531

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

You have three problems

  1. Your modal is missing the opening <div class="modal-header"> tag which is why the modal is messed up (almost always caused by a missing or extra tag)
  2. Your javascript calls Timer = document.getElementById('TimerID').innerHTML; and document.getElementById("TimerID").innerHTML = TimeStr; but your html has id="timer", change one or the other so that they match
  3. The close button on your modal has data- dismiss="modal">Close</button> note the space in data- dismiss. Get rid of that space or the button will not close the modal.

Regarding your timer, since all you really want is a countdown from a given number of secconds, what you have now is over kill. A simple recursive function would suffice:

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

Here's a working jsFiddle

Upvotes: 1

Related Questions