Announcement

Collapse
No announcement yet.

Making a Modal window

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Making a Modal window

    I'd like to make my own modal window to popup charts, graphs, ect. The code for the login popup seemed like a good place to start but that
    Code:
    a href="#login"
    triggers the javascript for the log in window. The
    Code:
    a href="#shipestimate_dialog"
    has a bit too much going on.

    So I guess my first question is, where does the coding for the login modal hide/reside at? I'm hoping I can duplicate it and tweak it.

    Leslie
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    Re: Making a Modal window

    Originally posted by lesliekirk View Post
    I'd like to make my own modal window to popup charts, graphs, ect. The code for the login popup seemed like a good place to start but that
    Code:
    a href="#login"
    triggers the javascript for the log in window. The
    Code:
    a href="#shipestimate_dialog"
    has a bit too much going on.

    So I guess my first question is, where does the coding for the login modal hide/reside at? I'm hoping I can duplicate it and tweak it.

    Leslie
    Best place to look may be here
    http://getbootstrap.com/javascript/#modals
    Mark Hood
    Vermont Gear

    Comment


      #3
      Re: Making a Modal window

      Forgot to answer the the other questions... The login modal is in the global header and the easiest example is this one which is pretty basic to do and simply copying the code into the site worked for me.

      <!-- Button trigger modal --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
      </button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      ...
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      </div>
      </div> </div>
      Mark Hood
      Vermont Gear

      Comment


        #4
        Re: Making a Modal window

        Hi Leslie: Maybe something like this? We use this to do a <div> overlay of quote information:
        <style>
        .overlay
        {
        background-color: #e8e8e8;
        opacity: .9;
        filter: alpha(opacity=90);
        position: fixed; top: 70px; left:200px;
        width: 700px; height: 300px;
        z-index: 10;
        border-style:solid;
        border-width:2px;
        border-color:#333;
        }
        </style>
        Create the overlay with this function:
        function show_quote(msg) {
        var overlay = document.createElement("div");
        overlay.setAttribute("id","overlay");
        overlay.setAttribute("class", "overlay");
        document.body.appendChild(overlay);
        var elem = "overlay";
        document.getElementById("overlay").innerHTML = msg;
        }

        Variable msg contains the HTML that you want to display.

        Larry
        Larry
        Luce Kanun Web Design
        www.facebook.com/wajake41
        www.plus.google.com/116415026668025242914/posts?hl=en


        Comment


          #5
          Re: Making a Modal window

          I was able to find what I needed with minimal tweaking.

          Code:
          <!-- Large modal -->
          <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Click here to view patterns</button>
          
          
          <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
              <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                              <h4>Color Charts</h4>
                          </div>
               <img src="images/chart1.jpg">
                                   
                                   <img src="images/chart2.jpg">
                                   <div class="modal-footer">
                              footer
                          </div>
              </div>
            </div>
          </div>
          I needed my modal window just a tick wider so I had to tweak the bootstrap.css from the default
          Code:
          .modal-lg{width:900px}
          to

          Code:
          .modal-lg{width:1000px}
          Thanks to all - I was afraid I was going to also have to edit the js file but this is working very nicely.

          Leslie
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Re: Making a Modal window

            Feeling lost here! The button and modal code both go into the BASK page >> Basket Contents tab correct? If so, how do I pull the info from the SERT page into the modal?

            Tried putting the SERT table into the modal in the BASK page >> Basket Contents tab...that eliminated the zip input. Then I tried wrapping the SERT table in the SERT page, and linking from the button...that didn't give me any modal.

            Jamie
            Last edited by jsdva; 07-09-14, 10:45 AM.
            Jamie Donaldson
            JSDVS Web Design / Development
            Web Design | Web Development | E-commerce Design & Integration

            Comment


              #7
              Re: Making a Modal window

              Update:

              No longer lost thanks to Ron Frigon and his replies in this thread, which helped me get on track: http://extranet.mivamerchant.com/for...otstrap-pretty

              Jamie

              Originally posted by jsdva View Post
              Feeling lost here! The button and modal code both go into the BASK page >> Basket Contents tab correct? If so, how do I pull the info from the SERT page into the modal?

              Tried putting the SERT table into the modal in the BASK page >> Basket Contents tab...that eliminated the zip input. Then I tried wrapping the SERT table in the SERT page, and linking from the button...that didn't give me any modal.

              Jamie
              Jamie Donaldson
              JSDVS Web Design / Development
              Web Design | Web Development | E-commerce Design & Integration

              Comment

              Working...
              X