• 0

jPopup, new jquery function I wrote


Question

I wrote my own popup function since none of the currently existing functions fullfilled the needs of my projects.

https://github.com/seahorsepip/jPopup

 

It supports IE7+* and is fully responsive. It's dynamic, all popup properties can be changed even after the popup has been opened.

 

Example popup code:

 

var example = new jPopup({
	title: "<h2>Hello world!</h2>",
	content: "<p>Sudo make me a sandwich?</p>",
	buttons: [{
		text: "Sure!",
		value: true
	}, {
		text: "Nope",
		value: false
	}],
	draggable: true
});
example.open(function(r) {
	alert("Value of clicked button: "+r);
});

 

A webpage and complete documentation are in the making. 

 

Let me know what you think about it and if you have any suggestions or ideas :D

 

 

*Yes I even made sure it works on very old useless browsers :shiftyninja:

Link to comment
https://www.neowin.net/forum/topic/1285784-jpopup-new-jquery-function-i-wrote/
Share on other sites

Recommended Posts

  • 0
  On 31/01/2016 at 15:23, Seahorsepip said:

I use less css mostly but if a project uses something else I'm also fine with it. I used css in this case since it requires no compiling for the user, it's ready to be used.

 

It might be a good idea to add a scss or less file and a css file so it can be used directly without any trouble(css) and developers can modify/learn from the scss/less file.

 

I'm currently looking into optimizing the js code, it can de reduced quite a bit I hope. Also There's a bug for IE8, buttons can have a "class" property that causes errors, to fix this I'll change it to buttonClass.

Expand  

How interested are you in using an asset manager?

  • 0
  On 01/02/2016 at 22:17, Mur said:

How interested are you in using an asset manager?

Expand  

Never used one, I used mostly less css in projects since it gave me the ability to have css variable which I could change on the fly with js.

 

Personally I don't see the need for an asset manager in this case, the files aren't big enough and it's our goal to keep them that way :p

 

I'm currently working on a resize option and width/height/minWidth/minHeight/maxWidth/maxHeight options.

  • 0
  On 01/02/2016 at 23:20, Seahorsepip said:

Never used one, I used mostly less css in projects since it gave me the ability to have css variable which I could change on the fly with js.

 

Personally I don't see the need for an asset manager in this case, the files aren't big enough and it's our goal to keep them that way :p

 

I'm currently working on a resize option and width/height/minWidth/minHeight/maxWidth/maxHeight options.

Expand  

It's not necessarily about the size of the file as much as it is the organization of certain things. Albeit functions or certain parameters, I use it in my personal site design in a way of partials as seen on github; the design is still a major wip but you can easily see how it would be a lot easier to sort things in this particular case. I've got that project followed and actively watching it, whenever I see an opportunity to hop in and help out I will. As you start to get more familiar with GitHub I can give you a bit of an insight of how I (personally) do project management so that you can scale up projects pretty easy in the future.

 

Already started using jPopup on my personal site, still have to tweak it a bit to do exactly as I want it to do but it's a really, really solid project and I love it. Well done.

  • 0
  On 01/02/2016 at 23:57, Mur said:

It's not necessarily about the size of the file as much as it is the organization of certain things. Albeit functions or certain parameters, I use it in my personal site design in a way of partials as seen on github; the design is still a major wip but you can easily see how it would be a lot easier to sort things in this particular case. I've got that project followed and actively watching it, whenever I see an opportunity to hop in and help out I will. As you start to get more familiar with GitHub I can give you a bit of an insight of how I (personally) do project management so that you can scale up projects pretty easy in the future.

 

Already started using jPopup on my personal site, still have to tweak it a bit to do exactly as I want it to do but it's a really, really solid project and I love it. Well done.

Expand  

Tweak it? What did you change? My goal in jPopup is to make it as versatile as possible.

  • 0
  On 02/02/2016 at 00:14, Seahorsepip said:

Tweak it? What did you change? My goal in jPopup is to make it as versatile as possible.

Expand  

Not to the design (sorry should have specified) it'll be used to display all of the case-study articles I public regarding the various development jobs I have.

 

I don't like the way the unordered list is presented, the library thus far has been perfect.

 

vjP3cvF.png

  • 0
  On 02/02/2016 at 00:17, Mur said:

Not to the design (sorry should have specified) it'll be used to display all of the case-study articles I public regarding the various development jobs I have.

 

I don't like the way the unordered list is presented, the library thus far has been perfect.

 

vjP3cvF.png

Expand  

Unordered lists and other html content are not styled, only the basic html elements are styled. Any additional styling can be done by adding additional css to the default css file of the website(not jpopup).

 

Example:

var neowin = new jPopup({
	title: "<h1>Neowin case studies</h1>",
	content: "<p class=\"hello\">Hello world</p>",
	buttons: [
		text: "Close"
	]
});
neowin.addClass("popup_case_studies").open();

Then you can add case studies specific css to the popup:

.popup_case_studies .popup ul li {
	/*Do whatever you want for case studies list items */
}

Also if you want to add a click handler to the hello world text you can do the following:

neowin.popupContent().children(".hello").click(function() {
	//Do something
});

So yeah I need to make a proper documentation with examples.

 

And I'm considering to add check and radiobox styling and also list styling.

This topic is now closed to further replies.
  • Posts

    • I could be incorrect but I believe ethernet in all TVs is Fast Ethernet unless otherwise stated. Even my LG C2 (much more expnesive than this TV) is also Fast Ethernet and seeing how WiFi standards are improving, I wouldn't hold my breadth to wait for most manufacturers to switch to gigabit ethernet port, just like how most TVs have 2GB RAM and 4-8 GB ROM.
    • OK, I guess that explains why they made it a full build update rather than a CU. Full build updates happen to Dev only about twice a year. Last one was in late March.
    • Google Chrome's new AI summarizes store reviews for you by Pradeep Viswanathan We frequently encounter various e-commerce websites while Browse online. Before placing an order, it’s common to look up reviews on Google to verify the site's legitimacy and product quality. Now, Google aims to streamline this process directly through the Chrome browser. For users in the US, Google Chrome now offers store reviews to improve your online shopping experience. Google is using Google Shopping data and other popular review websites to offer helpful insights. Here's how this feature works: When you visit an e-commerce website on Google Chrome, you can click the icon to the left of the web address. Google Chrome will then display an AI-generated summary of reviews. The summary will have details about customer service, product quality, shipping, pricing, and returns. On a related note, Google today announced the expansion of AI Mode to Google Search users in the UK. AI Mode is Google's AI-powered search experience, similar to Microsoft Bing's Copilot Search. While it may not be helpful for simple queries like asking for the weather or navigation queries, it will be helpful for more complex, multi-part questions and follow-ups. Google's AI Mode is built on a custom version of the Gemini 2.5 model, Google's flagship multi-modal AI model. The Google team wrote the following regarding the new AI Mode in Google Search: The new AI Mode will appear as a tab on the Google Search results page and is also available on mobile in the Google app for Android and iOS.
    • It was a matter of time. Anthropic must've been bleeding a lot of money with it.
    • OBS Studio 31.1.2 by Razvan Serea OBS Studio is software designed for capturing, compositing, encoding, recording, and streaming video content, efficiently. It is the re-write of the widely used Open Broadcaster Software, to allow even more features and multi-platform support. OBS Studio supports multiple sources, including media files, games, web pages, application windows, webcams, your desktop, microphone and more. OBS Studio Features: High performance real time video/audio capturing and mixing, with unlimited scenes you can switch between seamlessly via custom transitions. Live streaming to Twitch, YouTube, Periscope, Mixer, GoodGame, DailyMotion, Hitbox, VK and any other RTMP server Filters for video sources such as image masking, color correction, chroma/color keying, and more. x264, H.264 and AAC for your live streams and video recordings Intel Quick Sync Video (QSV) and NVIDIA NVENC support Intuitive audio mixer with per-source filters such as noise gate, noise suppression, and gain. Take full control with VST plugin support. GPU-based game capture for high performance game streaming Unlimited number of scenes and sources Number of different and customizable transitions for when you switch between scenes Hotkeys for almost any action such as start or stop your stream or recording, push-to-talk, fast mute of any audio source, show or hide any video source, switch between scenes,and much more Live preview of any changes on your scenes and sources using Studio Mode before pushing them to your stream where your viewers will see those changes DirectShow capture device support (webcams, capture cards, etc) Powerful and easy to use configuration options. Add new Sources, duplicate existing ones, and adjust their properties effortlessly. Streamlined Settings panel for quickly configuring your broadcasts and recordings. Switch between different profiles with ease. Light and dark themes available to fit your environment. …and many other features. For free. At all. OBS Studio 31.1.2 hotfix changes: Fixed an issue in OBS Studio 31.1.0 and 31.1.1 causing Multitrack Video to set the Maximum Video Tracks to 10 if the user had set it to "Auto" [dsaedtler] Fixed an issue in OBS Studio 31.1.0 and 31.1.1 causing Browser Source hardware acceleration to fail in the Flatpak version [reitowo/tytan652] Fixed an issue in OBS Studio 31.1.0 and 31.1.1 where progress bars were styled incorrectly [Warchamp7] Fixed an issue in OBS Studio 31.1.0 and 31.1.1 where spacing around scrollbars was incorrect [Warchamp7] Fixed an issue in OBS Studio 31.1.0 and 31.1.1 where Decklink Output did not work [CyBeRoni] Fixed a freeze in OBS Studio 31.1.0 and 31.1.1 on Linux when using PipeWire capture with explicit sync [YaLTeR] Fixed an issue where Video Capture Devices on Linux could unexpectedly stop capturing video [JiangXsong] Fixed an issue with PipeWire capture on Linux where video filters could cause gamma shift [tytan652] This was done by reverting a fix for white-tinted PipeWire captures in 10-bit or 16-bit color formats, so that issue will return for now. Download: OBS Studio 31.1.2 | Portable | ARM64 | ~200.0 MB (Open Source) View: OBS Studio Homepage | Other Operating Systems | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Dedicated
      ataho31016 earned a badge
      Dedicated
    • First Post
      Gladiattore earned a badge
      First Post
    • Reacting Well
      Gladiattore earned a badge
      Reacting Well
    • Week One Done
      NeoWeen earned a badge
      Week One Done
    • One Month Later
      BA the Curmudgeon earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      648
    2. 2
      ATLien_0
      261
    3. 3
      Xenon
      165
    4. 4
      neufuse
      142
    5. 5
      +FloatingFatMan
      107
  • Tell a friend

    Love Neowin? Tell a friend!