iOS Style Popup Dialog Plugin With jQuery - mobile-layer

iOS Style Popup Dialog Plugin With jQuery - mobile-layer

mobile-layer is a mobile-first jQuery popup plugin for creating iOS style loading indicators, toast messages, alert/confirm dialogs, top notification, action sheets, and scrollable pickers on the web app.

See It In Action:

How to use it:

1. Load the necessary jQuery library and the mobile-layer plugin's files in the document.

<link rel="stylesheet" href="css/layer.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/mobileLayer.js"></script>

2. Load the BetterScroll for scrollable pickers (iOS style pickerview).

<script src="js/bscroll.min.js"></script>

3. Create a loading indicator that auto dismisses after 2 seconds.

$.loading('Loading...',2000)

4. Create a toast message that auto dismisses after 2 seconds.

$.toast('Toast Message',2000)

5. Create an alert dialog.

$.alert('Alert Message','Alert Title',function(){
  console.log('alert')
})

6. Create a confirmation dialog.

$.confirm('Confirm Message','Confirm Title',function(){
  console.log('ok')
},function(){
  console.log('cancel')
})

7. Create a top notification bar that auto dismisses after 2 seconds.

$.toptip('Notification Message', 2000, 'custom-class')

8. Create an action sheet that popups from the bottom.

$.actions({
  title:'Choose A Language',
  onClose: function(){
    console.log('onclose')
  },
  actions:[
    {
      text: 'English',
      onClick: function(){
        console.log('English')
      }
    },
    {
      text: '中文',
      onClick: function(){
        console.log('中文')
      }
    },
    {
      text: 'German',
      onClick: function(){
        console.log('German')
      }
    }
  ]
})

9. Create a modal window with custom buttons.

$.modal({
  title:'Modal Title',
  text: 'Modal Content',
  buttons: [
    {onClick: function(){console.log('A')}, text: 'A'},
    {onClick: function(){console.log('B')}, text: 'B'},
    {onClick: function(){console.log('C')}, text: 'C'},
  ]
})

10. Append a scrollable wheel picker to an input field.

<input type="text" name="" id="picker" value="Opt 1">
$("#picker").picker({
  title:'Choose An Option',
  cols: [
    {
      textAlign:'center',
      values: ['Opt A-1', 'Opt A-2', 'Opt A-3', 'Opt A-4', 'Opt A-5', 'Opt A-6', 'Opt A-7', 'Opt A-8']
    },
    {
      textAlign:'center',
      values: ['Opt B-1', 'Opt B-2', 'Opt B-3', 'Opt B-4', 'Opt B-5', 'Opt B-6', 'Opt B-7', 'Opt B-8']
    }
  ]
})

This awesome jQuery plugin is developed by yellowSTA. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 22.09.2018
  • Source

Whoops, looks like something went wrong.

(1/1) ErrorException

file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space

in Filesystem.php (line 122)
at HandleExceptions->handleError(2, 'file_put_contents(): Only 0 of 246 bytes written, possibly out of free disk space', '/home/p336588/web/ivanovdmitry.com/public_html/vendor/laravel/framework/src/Illuminate/Filesystem/Filesystem.php', 122, array('path' => '/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/Ho7JDBNCY4bpNcHpoFhR8NkMxM9znnL2H3AkbD0y', 'contents' => 'a:3:{s:6:"_token";s:40:"1uPl2t1XiNmDwaLae4hI2q2ossVNFmcHDaQH38zd";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/ios-style-popup-dialog-plugin-with-jquery-mobile-layer";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 'lock' => true))
at file_put_contents('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/Ho7JDBNCY4bpNcHpoFhR8NkMxM9znnL2H3AkbD0y', 'a:3:{s:6:"_token";s:40:"1uPl2t1XiNmDwaLae4hI2q2ossVNFmcHDaQH38zd";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/ios-style-popup-dialog-plugin-with-jquery-mobile-layer";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', 2)in Filesystem.php (line 122)
at Filesystem->put('/home/p336588/web/ivanovdmitry.com/public_html/storage/framework/sessions/Ho7JDBNCY4bpNcHpoFhR8NkMxM9znnL2H3AkbD0y', 'a:3:{s:6:"_token";s:40:"1uPl2t1XiNmDwaLae4hI2q2ossVNFmcHDaQH38zd";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/ios-style-popup-dialog-plugin-with-jquery-mobile-layer";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}', true)in FileSessionHandler.php (line 83)
at FileSessionHandler->write('Ho7JDBNCY4bpNcHpoFhR8NkMxM9znnL2H3AkbD0y', 'a:3:{s:6:"_token";s:40:"1uPl2t1XiNmDwaLae4hI2q2ossVNFmcHDaQH38zd";s:9:"_previous";a:1:{s:3:"url";s:88:"http://ivanovdmitry.com/blog/post/ios-style-popup-dialog-plugin-with-jquery-mobile-layer";}s:6:"_flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}')in Store.php (line 128)
at Store->save()in StartSession.php (line 88)
at StartSession->terminate(object(Request), object(Response))in Kernel.php (line 218)
at Kernel->terminateMiddleware(object(Request), object(Response))in Kernel.php (line 189)
at Kernel->terminate(object(Request), object(Response))in index.php (line 58)