Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Small problem with modal window #775

Open
tdtooke opened this issue Mar 2, 2021 · 1 comment
Open

Small problem with modal window #775

tdtooke opened this issue Mar 2, 2021 · 1 comment

Comments

@tdtooke
Copy link

tdtooke commented Mar 2, 2021

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:
' ' + val.listtitle + ''

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
Copy link

cablegunmaster commented Dec 22, 2021

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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants