Develop Reference

On clicking close button on a lightbox redirect to another url

Here is the thing. I'm working on elementor EA lightbox. So when I click on an image a lightbox with video pops up. So I want it to redirect when the person clicks on the "X" button. We can achieve it with a script by adding an ID to the button and on click redirect to a link, I know. But the problem is with elementor, we can't actually add ID or Class to the close button.
This is how the close button looks like.
<button title="Close" type="button" class="mfp-close">×</button>
This is the code I tried. But it is not working with "getElementsByClassName" for some reason. And as I said I even can't add an ID to the button.
<script type="text/javascript">
document.getElementsByClassName("mfp-close").onclick = function () {
location.href = "www.google.com";
};
</script>
Can anyone see how this could work? Any help please?

document.getElementsByClassName("mfp-close") return an array
you can try
document.getElementsByClassName("mfp-close")[0]
<script type="text/javascript">
document.getElementsByClassName("mfp-close")[0].onclick = function () {
location.href = "www.google.com";
};
</script>

Change class to ID and then:
<script type="text/javascript">
$("#mfp-close).click(function () {
window.location.href = "www.google.com";
});
</script>

TRY using querySelector instead of getElementByClassName
document.querySelector(".mfp-close").onclick = function () {
location.href = "www.google.com";
};

Summernote: Manually open link dialog

I've trying to write a script that automatically displays the summernote link dialog box when I click a button.
For instance, I have the following button:
<button class="btn btn-sm btn-info use_hyperlink" data-href="//files.examples.org.uk/song.mp3" type="button">Copy</button>
So in my js I've got:
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
modal = $("div.note-editor.note-frame.panel.panel-default div.modal.link-dialog")
modal.addClass("in").modal("show")
modal.find("input.note-link-url.form-control.note-form-control.note-input").val(href)
modal.find("button.note-btn.note-btn-primary.note-link-btn").prop("disabled", false).removeClass("disabled").attr("type","button")
})
Which opens the dialog, successfully pastes the href but clicking the Insert Link button submits the form that the summernote resides in.
Looking at the summernote code on line 6765 there is a function called showLinkDialog which I imagine is the one I want. However when I tried:
$(document).ready(function () {
$("textarea#summernote").summernote({height: 500});
$("#linklist").on("click", "button.use_hyperlink", function () {
var href = $(this).data("href")
$("textarea#summernote").showLinkDialog({
url: href
});
})
})
I get an Uncaught TypeError: $(...).showLinkDialog is not a function.

Try trigger clicking the button
$('.note-insert [aria-label^="Link"').trigger('click')

Bootstrap Popover - JS Trigger

I'm trying to trigger Bootstrap's Pop Over with JS.
I want to be able to change the message and title relative to the link I click.
It works if I actually click the link, but I want to achieve this via Jquery .Click event.
Here is my current JS code:
//Global Tooltip Functionality
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").click();
});
});
Here is my DOM element I am calling function from:
<button type="button" class="tool-tip btn btn-default" data-dismiss="modal" data-tooltip-title="Item Added" data-tooltip-message="Some Message">Continue Shopping</button>
Here is the pop-up container(css hides this, I only want to see the pop-up):
Bootstrap Documentation: Bootstrap PopOver

You can show a tooltip programatically by calling
.popover('show')
$(function () {
$(".tool-tip").on("click",function () {
//Initializes Tooltip
$(function () {
$("#ToolTipContainer").popover();
});
var title = $(this).attr("data-tooltip-title"),
message = $(this).attr("data-tooltip-message");
$("#ToolTipContainer").attr("title", title);
$("#ToolTipContainer").attr("data-content", message);
$("#ToolTipContainer").popover('show');
});
});
Try not hiding the popover container as well, it is most likely hiding your popover.

Hide modal window javascript

So to show this modal I have the following code:
<button type="button" onclick="openModal(); return false;">A button</button>
and the javascript for this is:
<script type='text/javascript'>
function openModal(a)
{
$.modal({
content: 'Some content here',
title: 'a title',
maxWidth: 500,
});
win.closeModal();
}
</script>
I need a function that will hide this. Can anyone give me some advice on how to do the hideModal() function which will hide the modal when I click anywhere on the screen?

With the modal open in the browser window, use the browser's console to try
var modal;
function btnsModal() {
var btns = {
'Close': function (win) {
modal.closeModal()
}
}
return btns;
}
function openModal(oLink, content) {
var btn = btnsModal();
modal = $.modal({
buttons: btn
});
}

You can add "open" event to dialog, and then bind on click listener to it which will close the dialog if you click anywhere---
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#ID_of_ur_dialog').dialog('close');
})
}
for hiding effect you can use "hide" option---
hide: "highlight"

This is dumb...
I fixed this with display none in css... It turns out I didn't thick it trough... I added the display none and a JS event that triggers the CSS upon clicking anywhere else in the page, except the modal.
Thank you very much for all your input guys! Really appreciate it!

Unable to get javascript to do button click from child iframe

I'm playing around with the Jquery UI dialog. I have a page with a gridview, a button that refreshes the gridview and a link. When you click a link, a dialog window popup up with the details of the record.
When I press save on the child page, I have the child page calling a javascript function from the parent page. In this function, it tried to do the button click event but it doesn't seem to be working.
If you look at the showThanks function below,
The alert works, the button text changes but the button click doesn't work.
Could this be a security feature? Both pages are on the same page right now.
hmm any clue?
Thanks
Edit - if you click the button manually, it changes the grid (in the button event handler). Yet, the jquery doesn't seem to be going in the button's event handler and the grid doesn't change.
Parent page html
<asp:GridView ID="gv" runat="server" />
<asp:Button ID="btnRefresh" runat="server" />
<a id="popoutUsers" href="popup.aspx?page=Bob" class="OpenNewLink">CLICK ME</a>
<script type="text/javascript">
$(function () {
$('.OpenNewLink').click(function () {
var url = $(this).attr('href');
var dialog = $('<div id="modal"></div>').appendTo('body')
$('<iframe id="site" src="' + url + '" />').dialog({
modal: true
, close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
return false;
});
showThanks = function () {
alert("Thanks");
var button = $("#btnRefresh");
button.val("hello"); //This works
button.click(); //Nothing seems to happen
// button.trigger("click"); (Tried trigger as well but no luck)
};
});
</script>
Child page
<div>
Why hello there
<asp:Button ID="btnBob" runat="server" Text="click me" />
</div>
<script type="text/javascript">
$(function () {
$('#btnBob').click(function (e) {
e.preventDefault();
window.parent.showThanks();
window.parent.$('.ui-dialog-content').filter(function () { return $(this).dialog('isOpen'); }).dialog('close');
return false;
});
});
</script>

So decided to do a new round of google searching and found this link Html Button that calls JQuery and does not post back
I changed my button to the following (added the UseSubmitBehavior)
and now it works. Hopefully I didn't waste people's time...