Alexey Dudka

Mobilepopup - jQuery pop-up plugin

Main mobilepopup advantages:

  • lightweight and customizable
  • has adaptive desing
  • good decision for mobile site versions


Example (demo):

$.mobilepopup({
	targetblock:".pop-up",
	width:300px,
	height:300px,
	onformsubmited: function(data, el){
		$.mobilepopup('reload',{html:data});
	}
});
<div class="pop-up">
	<div class="header">We need your opinion!</div>
	<div class="content">
		<form action="ajax.php" class="popup-form">
			<p>Please post any bugs, issues and suggestions about this page. This will help us to better enhance it.</p>
			<textarea name="comment" placeholder="Write your comment"></textarea>
		</form>
	</div>
	<div class="footer">
		<a href="" class="submit-popup-form">Send</a>
	</div>
</div>


Mobile popup functions
$.mobilepopup(options) Init and open pop-up window
$.mobilepopup('reload',options) Load new content to pop-up window
$.mobilepopup('resize',options) Resize pop-up window (exp {width:'600px', height:'400px'})
$.mobilepopup('close') Close pop-up window
Settings
Pop-up window content
ajax url Load content by ajax
html html Specifies html
targetblock .class or #id Specifies the class or id of the block to display in the pop-up window. The block is cloned, that is, the block does not disappear from the page, and its clone is shown.
The size of the window, for screens <= 767 this does not work, because the full screen
width 50px(%...) The width of the window, the maximum width is always 100vw
height 50px(%...) Window height, maximum height is always 100vh
Pop-up window customizing
closehtml html close button html
customclass class Clustom class for popup window
Callbacks
onloaded function Everything is loaded
onclosed function Everything is closed
onformsubmited function The function that is executed when the form inside the pop-up window is executed and the result of execution returns, a description of how this form is inside the pop-up window below

For mobilepopup, you can quickly insert forms into a window and process them with ajax. What you need to do:

  1. In the form inside the window, you need to specify a class popup-form
  2. The button that should send the form, you need to specify a class submit-popup-form

Such a form is sent by ajax and after execution calls onformsubmited, the function returns the data that came as a result of executing the form

Plugins

  • Mobilepopup - jQuery pop-up plugin
  • Prettytextfield - jQuery plugin, sipmle creationg of text field with charcounter and smiles (emoji)