Alexey Dudka

Mobilepopup - jQuery pop-up plugin

Main mobilepopup advantages:

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


Simple example (demo):


$("body").on("click",".popup-demo",function(){
    $.mobilepopup({
        targetblock:".pop-up1",
        width:"500px",
        height:"300px"
    });
    return false;
});

$("body").on("click",".get-demopopup2",function(){
    $.mobilepopup('reload',{
        targetblock:".pop-up2",
        width:"500px",
        height:"400px"
    });
    return false;
});
<div class="pop-up1" style="display: none;">
    <div class="header">Demo popup 1</div>
    <div class="content">
        <p>
            Demo popup 1 content
        </p>
    </div>
    <div class="footer">
        <a href="" class="button get-demopopup2">Open demo 2</a>
    </div>
</div>

<div class="pop-up2" style="display: none;">
    <div class="header">Demo popup 2</div>
    <div class="content">
        <p>
            Demo popup 2 content
        </p>
    </div>
    <div class="footer">
        <a href="" class="button close">Close pop-up</a>
    </div>
</div>




Example of popup with form (demo):

$.mobilepopup({
	targetblock:"pop-up-form",
	width:300px,
	height:300px,
	onformsubmited: function(data, el){
		$.mobilepopup('reload',{html:data});
	}
});
<div class="popup-form">
	<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>




Example of confirm action (demo):


$("body").on("click",".confirm-action",function(){
	$.mobilepopup({
		type:"confirm",
		width:"500px",
		height:"auto",
		closeonoverflowclick: false,
		fullscreeninmobile: false,
		onconfirmed: function(el){
			alert("Action confirmed");
		}
	});
	return false;
});




Example go to link (demo):


$("body").on("click",".confirm-goto-link",function(e){
	e.preventDefault();
	var link = $(this);
	$.mobilepopup({
		type:"confirm",
		width:"500px",
		height:"auto",
		closeonoverflowclick: false,
		fullscreeninmobile: false,
		onconfirmed: function(el){
			location.href = link.attr("href");
		}
	});
	return false;
});


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.
content object You can use plain text or html
type type (text) Specifies popup window type, by default 'standart'
confirmcontent object You can change content of confirm popup, by default {header: "Confirm your action", content: "Are you sure you want to continue?", buttonoktext: "Yes", buttonnotext: "Cancel"}
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
closeonoverflowclick bool Close popup on overflow click, by default true
shakeonoverflowclick bool Shake on overflow click if it disabled, by default true
fullscreeninmobile bool Fullscreen in mobile, by default true
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
onconfirmed function The function that is executed when pressed "ok" in confirmation popup window

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 mobilepopup-form
  2. The button that should send the form, you need to specify a class submit-mobilepopup-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)