利用jQuery实现网页弹窗对话框插件MiniDialog



73 291 98



特效描述:利用jQuery实现 网页弹窗 对话框 插件MiniDialog,利用jQuery实现网页弹窗对话框插件MiniDialog

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/MiniDialog-es5.min.js"></script>
<script src="js/demo.js"></script>

3. HTML代码

<section id="container">
  <header>MiniDialog 对话框</header>
  <div class="box">
    <p>信息提示</p>
    <div class="button-box" id="button-box-1">
      <button>Info 信息</button>
      <button>Success 成功</button>
      <button>Warn 警告</button>
      <button>Error 错误</button>
    </div>
    <div class="code">
      <pre>
		<span fn>Dialog.info</span>( <span value>"info 对话框"</span>, <span value>"内容区域"</span> );
		<span fn>Dialog.success</span>( <span value>"success 对话框"</span>, <span value>"内容区域"</span> );
		<span fn>Dialog.warn</span>( <span value>"warn 对话框"</span>, <span value>"内容区域"</span> );
		<span fn>Dialog.error</span>( <span value>"error 对话框"</span>, <span value>"内容区域"</span> );
	</pre>
    </div>
  </div>
  <div class="box">
    <p>快捷方式</p>
    <div class="button-box" id="button-box-2">
      <button>内容</button>
      <button>标题 + 内容</button>
      <button>标题 + 内容 + 宽度</button>
    </div>
    <div class="code">
      <pre>
			<span fn>Dialog</span>( <span value>"内容"</span> );
			<span fn>Dialog</span>( <span value>"标题"</span>, <span value>"内容"</span> );
			<span fn>Dialog</span>( <span value>"标题"</span>, <span value>"内容"</span>, <span value>800</span> );
	 </pre>
    </div>
  </div>
  <div class="box">
    <p>常规配置</p>
    <div class="button-box" id="button-box-3">
      <button>标题 + 内容</button>
      <button>标题 + 内容 + 宽度</button>
      <button>内容区域背景色</button>
    </div>
    <div class="code">
      <pre>
		<span fn>Dialog</span>
				({
					<span attr>title</span>: <span value>"标题"</span>,
					<span attr>content</span>: <span value>"内容"</span>
				});
				<span fn>Dialog</span>
				({
					<span attr>title</span>: <span value>"标题"</span>,
					<span attr>content</span>: <span value>"内容"</span>,
					<span attr>width</span>: <span value>800</span>
				});
				<span fn>Dialog</span>
				({
					<span attr>title</span>: <span value>"标题"</span>,
					<span attr>content</span>: <span value>"内容"</span>,
					<span attr>contentBgColor</span>: <span value>"#f5f5f5"</span>
				});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>可拖动对话框</p>
    <div class="button-box" id="button-box-4">
      <button>打开一个对话框</button>
      <p><span>关闭所有对话框</span></p>
    </div>
    <div class="code">
      <pre>
			<span fn>Dialog</span>
			({
				<span attr>title</span>: <span value>"标题"</span>,
				<span attr>content</span>: <span value>"内容"</span>,
				<span attr>draggable</span>: <span value>true</span>
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>全屏对话框</p>
    <div class="button-box" id="button-box-5">
      <button>全屏对话框</button>
    </div>
    <div class="code">
		<pre>
			<span fn>Dialog</span>
			({
				<span attr>title</span>: <span value>"标题"</span>,
				<span attr>content</span>: <span value>"内容"</span>,
				<span attr>fullscreen</span>: <span value>true</span>
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>自动关闭</p>
    <div class="button-box" id="button-box-6">
      <button>可自动关闭</button>
    </div>
    <div class="code">
      <pre>
			<span fn>Dialog</span>
			({
				<span attr>title</span>: <span value>"标题"</span>,
				<span attr>content</span>: <span value>"内容"</span>,
				<span attr>autoClose</span>: <span value>5000</span>
			});
	</pre>
    </div>
  </div>
  <div class="box">
    <p>嵌入 Iframe</p>
    <div class="button-box" id="button-box-7">
      <button>打开对话框</button>
    </div>
    <div class="code">
      	<pre>
			<span fn>Dialog</span>
			({
			<span attr>title</span>: <span value>"标题"</span>,
			<span attr>width</span>: <span value>1100</span>,
			<span attr>iframeContent</span>: {
				<span attr>src</span>: <span value>"http://www.baidu.com/"</span>,
				<span attr>height</span>: <span value>600</span>
			},
			<span attr>showButton</span>: <span value>false</span>
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>嵌入图片</p>
    <div class="button-box" id="button-box-8">
      <button>打开对话框</button>
    </div>
    <div class="code">
      <pre>
			<span fn>Dialog</span>
			({
				<span attr>width</span>: <span value>1100</span>,
				<span attr>imageContent</span>: {
					<span attr>src</span>: <span value>"demo.png"</span>,
					<span attr>height</span>: <span value>600</span>
				},
				<span attr>showButton</span>: <span value>false</span>,
				<span attr>showTitle</span>: <span value>false</span>,
				<span attr>maskClose</span>: <span value>true</span>
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>嵌入多张图片</p>
    <div class="button-box" id="button-box-9">
      <button>打开对话框</button>
    </div>
    <div class="code">
      <pre>
			<span fn>Dialog</span>
				({
				<span attr>width</span>: <span value>700</span>,
				<span attr>imageContent</span>: {
					<span attr>src</span>: [ <span value>"1.png"</span>, <span value>"2.png"</span>, <span value>"3.png"</span>, <span value>"4.png"</span>, <span value>"5.png"</span> ],
					<span attr>height</span>: <span value>400</span>
				},
				<span attr>showButton</span>: <span value>false</span>,
				<span attr>showTitle</span>: <span value>false</span>,
				<span attr>maskClose</span>: <span value>true</span>
			});
	</pre>
    </div>
  </div>
  <div class="box">
    <p>嵌入视频</p>
    <div class="button-box" id="button-box-10">
      <button>打开对话框</button>
    </div>
    <div class="code">
     	 <pre>
				<span fn>Dialog</span>({
				<span attr>width</span>: <span value>800</span>,
				videoContent: {
					<span attr>src</span>: <span value>"https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4"</span>,
					<span attr>height</span>: <span value>450</span>
				},
				<span attr>showButton</span>: <span value>false</span>,
				<span attr>showTitle</span>: <span value>false</span>,
				<span attr>maskClose</span>: <span value>true</span>
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>确定按钮 - 加载中</p>
    <div class="button-box" id="button-box-11">
      <button>打开对话框</button>
    </div>
    <div class="code">
      <pre>
				<span fn>Dialog</span>
				({
					<span attr>title</span>: <span value>"标题"</span>,
					<span attr>content</span>: <span value>"内容"</span>,
					<span attr>ok</span>: {
					<span attr>loading</span>: true,
					<span attr>loadingText</span>: "等一会",
					<span attr>click</span>: function () {
						setTimeout(function () {
							<span fn>Dialog.close</span>();
						}, 3000)
					}
				}
			});
		</pre>
    </div>
  </div>
  <div class="box">
    <p>按钮事件</p>
    <div class="button-box" id="button-box-12">
      <button>打开对话框</button>
    </div>
    <div class="code">
			  <pre>
					<span fn>Dialog</span>({
						<span attr>title</span>: <span value>"标题"</span>,
						<span attr>content</span>: <span value>"内容"</span>,
						<span attr>ok</span>: {
							<span attr>click</span>: function () {
								alert( <span value>"确定"</span> );
							}
						},
						<span attr>cancel</span>: {
							<span attr>click</span>: function () {
								alert( <span value>"取消"</span> );
							}
						}
					});
			</pre>
    </div>
  </div>
  <div class="box">
    <p>开关事件</p>
    <div class="button-box" id="button-box-13">
      <button>打开对话框</button>
    </div>
    <div class="code">
     	 <pre>
			<span fn>Dialog</span>
			({
				<span attr>title</span>: <span value>"标题"</span>,
				<span attr>content</span>: <span value>"内容"</span>,
				<span attr>afterOpen</span>: function () {
					alert( <span value>"打开了对话框"</span> );
				},
				<span attr>afterClose</span>: function () {
					alert( <span value>"关闭了对话框"</span> );
				}
			});
		</pre>
    </div>
  </div>
</section>
<script src="js/MiniDialog-es5.min.js"></script> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到