这是一款jQuery对话框插件。该对话框插件使用dialog元素和 HTMLDialogElement API来制作对话框, 可以生成漂亮的对话框效果。
使用方法
在页面中引入jquery和dialogify.min.js文件和样式文件dialogify.css。
<link rel="stylesheet" href="css/dialogify.css"> <script src="path/to/jquery.js"></script> <script src="path/to/dialogify.min.js"></script>
初始化插件
最简单的使用方法如下:
Dialogify.alert('这是一个Alert');
可以创建带确认和取消按钮的对话框。
Dialogify.confirm('Are You Sure?', { ok: function(){ // confirm callback }, cancel: function(){ // cancel callback } });
也可以创建prompt对话框。
Dialogify.prompt('What\'s your name ?', { placeholder: 'Enter your name', ok: function(val){ Dialogify.alert('Hi! ' + val); }, cancel: function(){ Dialogify.alert('canceled'); } });
还可以通过面板创建自定义的对话框。
<script type="text/template" id="template"> Modal Content Here </script> new Dialogify('#template') .title('Dialogify') // dialog title .buttons([ // custom buttons { text: 'Cancel', click: function(e){ console.log('cancel click'); this.close(); } }, { text: 'Okey', type: Dialogify.BUTTON_PRIMARY, click: function(e){ console.log('ok click, title value: ' + this.$content.find('input.text-field').val()); } } ]) .show(); // shows the modal });
通过HTML标签创建对话框。
let html = 'modal content here'; let dialogify = new Dialogify(html) .title('Modal Dialogify') .buttons([ { type: Dialogify.BUTTON_DANGER, click: function(e){ console.log('danger-style button click'); this.close(); } }, '<a class="btn btn-insert" href="javascript:;">other action</a>' ], {position: Dialogify.BUTTON_CENTER}); dialogify.showModal();
通过ajax调用内容。
var options = { ajaxPrefix: '', ajaxData: {var1: 'hello world'}, ajaxComplete: function(){ console.log('ajax complete'); this.buttons([{ type: Dialogify.BUTTON_PRIMARY }]); } }; new Dialogify('ajax.html', options) .title('Ajax Dialogify') .show();
该jQuery对话框插件的github地址为:https://github.com/OneupNetwork/dialogify
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!