How can I add a close button to pop up window - javascript

I am in way over my head, new to S/O and need to get this done as soon as possible. If I am doing this wrong I apologize in advance.
I purchased an extension that was simple enough to install but I need to extend the function just a but. I reached out to the developer to no avail.
Anyway I need to add a close button to the pop ups featured on the home page of this website (http://www.juanlafontalaw.com) Click on one of the hotspots (Red) and the pop up will appear. I simply need to add a close button or X that will allow the user to close the pop up without touching the main screen.
The site is Wordpress based. Plug-in: Visual Composer. The Extension: Visual Composer Add-on Image Hotspot with Tooltip (This is the focal point of my question)
I have no idea where to begin and did not expect to be in this position. And I did not think the develop -who does offer support to totally ignore my

Make a button in html, and use jquery click function to make display none in the pop up
$("#btn-id").click(function(){
$("pop-up").css("display","none");
})

Related

How can I use javascript to open a navigation pane in Adobe Acrobat DC?

Is there a way to use javascript in Adobe Acrobat DC to open a specific Navigation Pane? I've been struggling to find suitable documentation for this, so I'm asking here.
I've got a button that allows a user to attach documents to the PDF file, which works great. The issue here is that I can't set the attachments pane to stay open. I can execute the menu command to show/hide attachments, which works great for one attachment, but then as soon as you add the second attachment the pane closes, which is less than ideal (and then it opens with the third attachment, closes with the fourth, etc., etc.).
Is there a bit of code that can solve this issue, or some other setting in the document that will achieve the same effect automatically? Please note that my end users are not the most tech savvy of folks, so some way that minimizes button clicking to display the attachments is ideal.
I was researching the same problem and came across a solution using this undocumented function.
Right click on the button and go to Properties.
In the Actions tab, under Select Action choose Run a Java Script. Click Add and copy and paste this text:
this.viewState = {overViewMode:7};
It works perfectly.
Is there a way to use javascript in Adobe Acrobat DC to open a specific Navigation Pane?
No. Acrobat JavaScript cannot control the navigation panes.

Code Mirror only displays after a user clicks on it when integrated into a Bootstrap tab

I am having an issue with integrating Code Mirror into a Bootstrap tab.
The problem is that because the Bootstrap tab is not set to active, code mirror will only display the content if the user clicks on it.
I have thoroughly searched a solution for the problem but have not found anything that works (possibly due to my knowledge about JavaScript not being very good). I have tried things like telling codemirror to refresh, but it doesn't solve the problem.
Calling .refresh() on the editor is what is needed here. You just have to make sure you do it after the editor actually becomes visible. I am not sure how to do this with Bootstrap tabs, but I'm sure there is some way to listen to tab change events.

HTML website design, links opening smaller windows on the page

So i tried searching for what I looked for but I couldn't really find exactly what I was looking for, if it even is possible that is.
What I'm looking for is a way to make the links people click on my website appear almost as ads, not a seperate window or tab in the browser but its own small window on the current tab itself. I made a image as a sort of example of what I mean. I don't know if it'll do any good but its worth a shot, I'd love to have it be able to work with Coolmenu as well. And if people wanted to open them in a new window or new tab, they could just right click, like below:
Update: 10:32 7.11
I realized that both of these links, as well as when i searched for some on my own all date form like 2006-2009, whereas all of them use
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
I think I can just write () (correct me if im wrong) as well as the paragraph stuff, but what should I do about all the ? should I just straight out remove it or replace it?
Update 10:50 7.11
I don't got more time to work on it today but next time I got some time, should I post all the other javascript and css I have on my page (only coolmenu that is) to give you some sort of idea of what exactly I want to accomplish?
And again, thank you all for the great help.
Update 12.11 08:05: I'm having trouble getting it to work together with Coolmenu.
I can provide with my css and javascript code for both coolmenu and the window thing if required, should i upload a .txt or just put it here?
Modal Windows
I guess you wanna make Modal Windows. You can easily do that using this tutorial here: Simple jQuery Modal Window Tutorial.
Screenshot:
Demo here: Demo
jQuery Dialog
Or you can even use jQuery Dialogs, which uses same principle, but easy to implement.
Although you don't want to open a new window, this is the quickest way you will get it to work how you want and involves the least amount of javascript.
Code:
Hi
Parameter 1 is the URL, parameter 2 is the name of the window.
In the 3rd parameter you can pass the following options:
status: The status bar at the bottom of the window.
toolbar: The standard browser toolbar, with buttons such as Back and Forward.
location: The Location entry field where you enter the URL.
menubar: The menu bar of the window
directories: The standard browser directory buttons, such as What’s New and What’s Cool
resizable: Allow/Disallow the user to resize the window.
scrollbars: Enable the scrollbars if the document is bigger than the window
height: Specifies the height of the window in pixels. (example:
height=’350′)
width: Specifies the width of the window in pixels.
For more info click here

Pop-up/modal dilemma

I'm stuck in a problem that on first glance seems simple, but actually it's a bit hard to fix. I have a share button on my colorbox and when a user clicks it I want to open a pop-up with the social media link. Now I tried a few simple pop-ups but a lot of the blockers are disabling them and it's not an option to force the users to disable their software.
Can anyone offer suggestions?
You can try to replace your popup with iframe integrated into your page. Place it to the center of the page, hide it initially. And on user click set iframe's src to the url which you open in popup now and show iframe.
Off the top of my head, I'd suggest some sort of modal, jqModal is pretty popular and my preferred way of doing things. Do you have any code that you could share?

Close button like facebook wall or youtube

I'm a huge newb when it comes to javascript/jQuery/Ajax. I'm looking to learn how to add a close button to content on my site similar to facebook's wall or youtube's experimental homepage.
Where is the starting point to do this? jQuery UI? Any other packaged solutions?
You just need to have a list of links to the function that you want to execute and hide them.
Then, when you click on the close button, it makes that list appear.
Here's a simple example
http://www.jsfiddle.net/9scYR/

Categories

Resources