HTML, CSS, JavaScript
Bootstrap Modal blinks, disappears
Gravatar is a globally recognized avatar based on your email address. Bootstrap Modal blinks, disappears
  Carl Chambers
  All
  Jan 6, 2017 @ 10:49am

Hi All,

Using WC6

In the page footer template, I have code for the user to subscribe to a newsletter. It displays a modal where the user selects their preferred language and hits the submit button. Here's the code...

<form class="form" role="form" id="newsletter" action="addtomailinglist.psp" method="post">
            <div id="langModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
              <div class="modal-dialog modal-sm" role="document" style="width:250px;">
                <div class="modal-content">
                  <%= RenderPartial("~/views/languageradio.wc") %>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-style btn-k btn-primary">Subscribe</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="input-group">
                  <label class="sr-only" for="subscribe-email">Email address</label>
                  <input type="email" name="emailaddr" class="form-control" id="subscribe-email" placeholder="Enter your email">
                  <span class="input-group-btn">
                   <!--  <button type="submit" class="btn btn-style btn-k btn-primary">OK</button> -->
                    <button type="button" class="btn btn-style btn-k btn-primary" data-toggle="modal" data-target="#langModal">OK</button>
                  </span>
                </div>
              </div>
            </div>
          </form>

This works fine on every page EXCEPT 1. On that page, the modal appears for a blink and then disappears. I've been looking for differences between the template for that page and all the other pages that may be causing this to happen. So far, no joy.

Does anyone have any experience with this behavior that you give give me tip on what to look for ?

Thanks,
Carl

Gravatar is a globally recognized avatar based on your email address. re: Bootstrap Modal blinks, disappears
  Carl Chambers
  Carl Chambers
  Jan 6, 2017 @ 04:07pm

Found it. I had the following in my footer scripts section.

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

So I guess modal.js is built into bootstrap.js?
The part I don't understand is that there are two other modals in the same page and they worked OK. Oh well, it's working now.

Carl

Gravatar is a globally recognized avatar based on your email address. re: Bootstrap Modal blinks, disappears
  Rick Strahl
  Carl Chambers
  Jan 7, 2017 @ 01:49pm

Bootstrap.js contains all the little libraries. You can choose to load all of them in bootstrap.js or load them individually.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Bootstrap Modal blinks, disappears
  Carl Chambers
  Rick Strahl
  Jan 7, 2017 @ 11:06pm

Thanks, Rick.
Still much to learn.

© 1996-2024