I'm importing Jquery Modal from these two links (js and css)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
I've added the following html code inside the body
<button onclick="load();" class="btn btn-primary">
<span class="fa fa-icon fa-filter"></span>
Filtrar
</button>
<div id="loadingModal" class="" style="display:none">
Cargando
</div>
and the following is in a js file
function load() {
openLoadingModal();
doSomething();
closeModal();
}
function openLoadingModal(e) {
$("#loadingModal").modal("show");
var count = 0;
var points = "";
var intervalId = window.setInterval(function(){
count++;
$("#loadingModal").text("Cargando" + ".".repeat(count % 3 + 1));
}, 1000);
return intervalId;
}
With this, the modal opens as I expect. The thing is that I want to close the modal when this ends. But the solutions I've found didn't work. I tried the following:
$("#loadingModal").modal("close");
$("#loadingModal").modal().close();
$("#loadingModal").modal().close;
$("#loadingModal").modal("toggle");
$("#loadingModal").modal().toggle();
None of this closes the modal as it should (maybe hides the modal, but not all of it, since there is a black screen)
I think this shouldn't be this hard, but every link I get in tells me to do one of this
Thanks
If there is only one modal on the page, use this:
$.modal.close();
Related
I am a beginner, trying to implement 'click' event listener to pop up a modal. But as soon as I click the link the modal appears and disappear instantly.
const btn = document.getElementById(btn");
const modal= document.getElementById("modal");
const showModal = function (el, modalId) {
el.addEventListener("click", function () {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden{
display: none
}
<a class='btn'> Click </a>
<div id='modal' class='hidden'> Modal Content </div>
you should define id="btn" on your a tag to be able to do
document.getElementById("btn")
const btn = document.getElementById("btn");
const modal = document.getElementById("modal");
const showModal = function(el, modalId) {
el.addEventListener("click", function() {
modalId.classList.remove("hidden");
});
};
showModal(btn, modal);
.hidden {
display: none
}
<a id="btn"> Click </a>
<div id='modal' class='hidden'> Modal Content </div>
Thanks You so much guys for responding. I found my mistake, I was using 'link' tag with empty 'href' attribute, due to which the page was reloading ever time I clicked it. I simply replaced the links with button tag and now it is working just fine.
Although I still want to know if it is possible to stop the page from reloading when link element is clicked.
Also, thank you for highlighting the 'class/id' typo.
I'm having a tough time following this little tutorial on how to create a modal window when a button is clicked.
Not sure if my html is correct (the modal window is at the very bottom), but when I click on save list button nothing happens, only a refresh. I'm using Visual Studio Code with the live server plugin if that has anything to do with it. It did work when using a simple alert('hello').
For reference here is my codepen: https://codepen.io/OMantid/pen/pobLKWx
HTML
<form id='myModal' class= 'Modal is-hidden is-visuallyHidden'>
<div class='Modal-content'>
<label for='list-name'>Name:</label>
<input type='text' name='list-name' id='list-name'>
<div class='modal-btn-container'>
<button name='save-listName'>Save</button>
<button name='cancel-listSave' class='cancel-btn'>Cancel</button>
</div>
</div>
</form>
JS
//Get the modal
let modal = document.getElementById('myModal');
//Get the main container and the body
let main = document.getElementsByTagName('body');
let header = document.getElementsByTagName('header');
//Get the open button
let saveBtn = document.getElementById('save-btn');
saveBtn.onclick = function() {
modal.className = 'Modal is-visuallyHidden';
setTimeout(function() {
main.className = 'is-blurred';
modal.className = 'Modal';
}, 100);
}
Thank you.
I am using Google's Material Design.
I have put a dialog in but it doesn't seem to close in Safari. (It does close in Chrome).
Dialog:
<dialog class="mdl-dialog">
<h4 class="mdl-dialog__title">Question Help</h4>
<div class="mdl-dialog__content">
<p>
Help text will go here dynamically.
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" id="closeModal" class="mdl-button close">Close</button>
</div>
</dialog>
Javascript rendering the Dialog:
let dialog = document.querySelector('dialog');
let showDialogButton = document.querySelectorAll('.show-dialog');
let i;
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
for (i = 0; i < showDialogButton.length; ++i) {
showDialogButton[i].addEventListener('click', () => {
dialog.showModal();
});
}
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
I have console.log(); inside the event listener and it isn't getting inside the function. But it is picking up the .close element. So I don't think the event listener is firing?
Any ideas why the dialog doesn't close?
Move the dialog under the <body>
From the dialog polyfill docs:
Modal dialogs have limitations-
They should be a child of <body> or have parents without layout (aka,
no position absolute or relative elements)
I use the DateTimePicker plugin made by Trent Richardson in a modal popup, to select the date from which to archive items. All works fine when the modal pops up. In this modal I have two buttons: Archive and Cancel.
If I select a date and press Archive, all works well and at the next pop up, the datetimepicker works fine.
However, if I press Cancel, the next time I use the popup, the datetimepicker doesn't work. Weirdest yet, I have another popup to show archived items that also has a datetimepicker. If I cancel the action in either popup, the datetimpicker will not show in neither popup.
Here's the code javascript to initialize the popup:
var modalBackground = $("#modalBackground");
var Notifications_ArchiveHolder = $("#Notifications_ArchiveHolder");
var Notifications_ShowArchivePopupHolder = $("#Notifications_ShowArchivePopupHolder");
var ArchiveURL = "#Url.Action("Archive")";
var ShowArchiveUrl = "#Url.Action("ShowArchive", "Notifications")";
function ArchivePopup() {
$.get(ArchiveURL, function (content) {
if (Notifications_ArchiveHolder.html().length <= 10) {
Notifications_ArchiveHolder.html(content);
}
})
InitArchivePopup();
}
function InitArchivePopup() {
modalBackground.show();
//set up positon
var h = $(window).height();
var w = $(window).width();
var hh = Notifications_ArchiveHolder.height();
var hw = Notifications_ArchiveHolder.width();
var posx = (h / 2) - 100;
var posy = (w / 2) - 200;
Notifications_ArchiveHolder.css("position", "fixed");
Notifications_ArchiveHolder.css("top", posx);
Notifications_ArchiveHolder.css("left", posy);
Notifications_ArchiveHolder.show();
$("body").css("overflow", "hidden");
}
function Cancel_Archive() {
Notifications_ArchiveHolder.hide();
Notifications_ArchiveHolder.html("");
modalBackground.hide();
}
A div is used for the background and another to host the popup:
<div id="modalBackground" class="graphicScreen" style="display: none; position: fixed; top: 0px; left: 0px;"></div>
<div id="Notifications_ArchiveHolder" style="background-color: white; display: none; z-index: 9999;"></div>
And the code for the partial view rendered in the popup:
<link rel="stylesheet" href="#Url.Content("~/Resources/styles/Notifications/NotificationsPage.css")" />
#using (#Html.BeginForm("Archive", "Notifications", FormMethod.Post))
{
<div class="popupTitle">
Archive notifications
</div>
<div class="popupNotifications">
<span>Archive to date (inclusive)</span>
<input type="text" name="olderThan" id="chooseDate" />
</div>
<div style="margin: 15px">
<input class="goVariant" type="submit" value="Archive" />
<input id="cancelBtn" class="goVariant" type="button" value="Cancel" onclick="Cancel_Archive()" />
#*<div class="tooltip_Holder" keyword="notif_admin_archive" onclick="showToolTip();"></div>*#
</div>
}
<link href="#Url.Content("~/Resources/styles/jquery-ui-timepicker-addon.css")" rel="stylesheet" />
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-1.9.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Resources/JQuery/DateTimePicker/jquery-migrate-1.2.1.js")"></script>
<script>
$(document).ready(function () {
$('#chooseDate').datetimepicker();
})
</script>
Any idea would be appreciated.
Please try to use the following code. As you loading content on you modal so you need to use the live function which can be achieved using the following code.
$('body').on('click','#chooseDate',function(){
$(this).datetimepicker();
});
After thorough clean-up of script files (no longer passing them from the partial view), it sorted out.
Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.
Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?