Serhioromano / bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.
http://bootstrap-calendar.eivissapp.com/
MIT License
3.02k stars 1.29k forks source link

Small problem with modal window #775

Open tdtooke opened 3 years ago

tdtooke commented 3 years ago

I've set up my list on index.html next to the calendar to open up in modals. I did this by changing the .html on the thing that adds items to the eventlist in app.js. Everything works fine except the screen freezes up if I click outside of the modal. On the modals that I open from within the calendar this doesn't happen. I added data-backdrop="static" data-keyboard="false" as a way to avoid the problem but I'd like to not have to do that. Does anybody have any idea why this happens?

Here is how I construct the .html in the list: ''

Also it did that before I added the checkboxes, that's for something else all together (querying multiple events from the list at once)

On index.html I have: $(document).on("click", ".open-myModal", function () { var myurl = $(this).data('url'); var name = $(this).data('name'); document.getElementById("name").innerHTML = name; document.getElementById("page").src = myurl;

to handle opening the modal and my modal is:

<div class="modal hide fade" id="myModal" role="dialog" style="width: 1250px; position: fixed; left: 285px; top: 10px">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="name">Query Result</h3>
    </div>
    <div class="modal-body" style="height: 1025px">
        <iframe id="page" style="border:none; height: 1012px; width: 1200px"></iframe>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick="moveForward()" data-dismiss="modal" style="float: left;">Move >></button>
        <button type="button" class="btn btn-default" onclick="updateTime()" data-dismiss="modal" style="float: left;">Update Time Due Out</button>
        <a href="#" data-dismiss="modal" class="btn">Close</a>
    </div>
</div>

My theory is I have this problem because I use the modal you guys have in the example to work for the calendar and added a modal of my own making for the eventlist and somehow the problem springs from this but I don't know how.

cablegunmaster commented 2 years ago

Is this still an issue?

what you could do is look up the "Classes" the modal use for the ones in the bootstrap-calendar and see if there is any prevention of closing added in it. And check one by one if the classes have the closure of modals added to it or this function has possible been overwritten. Compare these to your own classes and see if you are missing any in comparison.

If this is the case and you see you are missing one, see what the class does in Javascript (if any event handlers are attached to it).