Making a Modal window

[lesliekirk]

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

a href="#login"

triggers the javascript for the log in window. The

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

[Mark Hood]

Re: 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

a href="#login"

triggers the javascript for the log in window. The

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]

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>

[wajake41]

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

[lesliekirk]

Re: Making a Modal window

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

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

.modal-lg{width:900px}

to

.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

[jsdva]

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

[jsdva]

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

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