0

I'm starting to work with bootstrap. I grabbed some sample code, but it seams not working. And actually I have three questions.

A). Call the first modal is OK. But from this modal, I cannot open the second one.

B). Still from the first modal, I have a button to go back to the contact div in the HTML source, which is not working.

C). From the button JS, calling the function 'Alert_Hello' is OK: it displays the alert, it goes to the internal link #contact but right after the HTML page seems to reload going to the top of the page. Why?

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/modal.js"></script>

    <a href="#contact" class="btn btn-primary">Contact</a>
    <a href="#about" class="btn btn-primary">About</a>

    <!-- Button trigger modal -->
    <button class="btn btn-success" data-toggle="modal" data-target="#MdlSignIn">Sign In</button>

    <a href="" class="btn btn-danger" onclick="Alert_Hello()">JS</a>

    <!-- Modal -->
    <div class="modal fade" id="MdlSignIn" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Sign In Input</h4>
          </div>
          <div class="modal-body">
            <form role="form" action='#' method="post">
           <input type="text" class="form-control" placeholder="Username">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" id="signin">Sign In</button>
            <button type="button" class="btn btn-primary" id="signin-cnt">Contact</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

      <!-- Modal -->
    <div class="modal fade" id="MdlSignInErr" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Sign In Error</h4>
          </div>
          <div class="modal-body">
            <p>Please review your sign in input.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="contact">Contact us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">About us</div>
    <a href="#top" class="btn btn-primary">Top</a>
  </body>
</html>

JavaScript code called from the HTML:

//set button id on click to hide first modal
$("#signin").on( "click", function() {
        $('#MdlSignIn').modal('hide');
        $('#MdlSignInErr').modal('show');
});

$("#signin-cnt").on( "click", function() {
        $('#MdlSignIn').modal('hide');
        window.location="#contact";
});

function Alert_Hello() {
  alert('Hello from external JavaScript!');
  window.location="#contact";
}

I'm using bootstrap 3.3.7 for both css and js and I'm using jquery 3.2.1.

Thank you in advance for your tips.

Se0ng11
  • 2,303
  • 2
  • 26
  • 45
Jerome
  • 366
  • 5
  • 17

2 Answers2

0

Look into this: Multiple modals overlay

This may help you as you need to setup a way to allow modals to stack, maybe this is the case for you.

Edit:

Also about C), do you want it to just go to the "contact"-div? You may have to close the modals and you then could use "scrollTo" like this:

$('html,body').animate({ scrollTop: $("#contact").offset().top}, 'slow'); });

Maybe this helps and you wouldn't have to use the window.location; If you want the url to be #contact if you want it to be linkable you could use window.history.pushState(a,b,c) like:

window.history.pushState('Contact', 'Contact', '#contact');

This would change the Title of the page along with adding the "#contact" to the current page, as with scrollTo you wouldn't see the "#contact".

DenDen
  • 34
  • 2
  • Hi DenDen, actually the link is really interesting. The sample does work from the net, but when I copied locally the source on the harddisk this is not working. I tested it from my web server and it work like a charm. Something is weird for me. Do you know what is happening? – Jerome Sep 12 '17 at 07:56
  • That's interesting, it is good that it is at least working on the net. I have also updated my post with additional stuff, maybe it helps. – DenDen Sep 12 '17 at 08:00
  • I've been told bootstrap 3 is not compatible with jquery 3. Hence I tried with jquery 2... Not working. It might not be the case since last updates from both jquery and bootstrap. – Jerome Sep 12 '17 at 08:22
  • About C), I need further support. Shall I replace the second line of the function Alert_Hello() is my modal.js code by one of your code sample? – Jerome Sep 12 '17 at 08:29
  • About C), I had to take the first 3 lines of your code... But the page is still going to the top. – Jerome Sep 12 '17 at 09:15
0

After a few days working on other topics, I discovered that some JavaScript shall be put at the very end of the HTML to ensure it will work properly. Therefore, I did the same here and it solved the issue A).

Here is the new HTML code working perfectly (only for issue A):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

    <a href="#contact" class="btn btn-primary">Contact</a>
    <a href="#about" class="btn btn-primary">About</a>

    <!-- Button trigger modal -->
    <button class="btn btn-success" data-toggle="modal" data-target="#MdlSignIn">Sign In</button>

    <a href="" class="btn btn-danger" onclick="Alert_Hello()">JS</a>

    <!-- Modal -->
    <div class="modal fade" id="MdlSignIn" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Sign In Input</h4>
          </div>
          <div class="modal-body">
            <form role="form" action='#' method="post">
           <input type="text" class="form-control" placeholder="Username">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" id="signin">Sign In</button>
            <button type="button" class="btn btn-primary" id="signin-cnt">Contact</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

      <!-- Modal -->
    <div class="modal fade" id="MdlSignInErr" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Sign In Error</h4>
          </div>
          <div class="modal-body">
            <p>Please review your sign in input.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="contact">Contact us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">About us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <script type="text/javascript" src="js/modal.js"></script>
  </body>
</html>

I'm closing this question. I'm going to figure out the issue B) and C) which might having the same root cause.

Anyways, thank you for reading and trying to help me.

Jerome
  • 366
  • 5
  • 17