自举模态框内容

Question

I'm using a modal box to display my advertising work for my portfolio. The modals are functioning properly for the most part, but it seems like the content within the modals is blocking my navbar at the top.

Without dynamically loading the content, is there a way to make the content of the modals not interfere with the navbar? I tried giving the navbar a higher z-index, but that didn't seem to do the trick. I gave the modal content as well as the modal.backdrop a lower z-index, but nothing seems to be doing the trick.

Here is a link to the page: http://0034191.netsolhost.com/ryancurtis/advertising.html

This might by an easy fix, but I've tried everything within my skill set. I'm pretty new to bootstrap.

Answer 1

Don't make the dialog modal. You can still pop-up the dialog, but don't make it modal. Modal prevents the user from seeing/interacting with what lies beneath.

It's easier to see the distinction via this example from the jQueryUI dialog (a very similar system).

I'm not fluent with bootstrap, but it appears that you would make your dialog an alert rather than a model.

Note that you can mix/intermingle bootstrap with jQueryUI if you wished to do so. They both run on top of jQuery, just include both libraries.

Answer 2

why dont u give padding/top margin for modal? i guess its simplest solution..

<style>
.modal {            
margin-top:50px;
}
</style>

or with JS

<script>    
{
    $("#myModal").animate({"width":"1100px","left":"30%"},3000,'easeInCirc');
}
</script>