VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。  id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮  <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例


		
    
			
  1. 
				 <!-- Trigger the Modal -->
    2. 
			
  2. 
				<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>
    3. 
			
  3. 
				 
    4. 
			
  4. 
				<!-- The Modal Content -->
    5. 
			
  5. 
				<div id="myModal" class="reveal-modal" data-reveal>
    6. 
			
  6. 
				  <h2>Heading in Modal.</h2>
    7. 
			
  7. 
				  <p>Some text in the modal.</p>
    8. 
			
  8. 
				  <p>Some text in the modal.</p>
    9. 
			
  9. 
				  <a class="close-reveal-modal">&times;</a>
    10. 
			
  10. 
				</div>
    11. 
			
  11. 
				 
    12. 
			
  12. 
				<!-- Initialize Foundation JS -->
    13. 
			
  13. 
				<script>
    14. 
			
  14. 
				$(document).ready(function() {
    15. 
			
  15. 
				    $(document).foundation();
    16. 
			
  16. 
				})
    17. 
			
  17. 
				</script>
    18. 
		

		

			复制

		实例预览 »

	

		模态框大小

	

		可以在模态框容器上添加以下类来设置模态框的大小：

	
    
		
  • 
			.tiny: 30% 宽度
    • 
		
  • 
			.small: 40% 宽度
    • 
		
  • 
			.medium: 60% 宽度
    • 
		
  • 
			.large: 70% 宽度
    • 
		
  • 
			.xlarge: 95% 宽度
    • 
		
  • 
			.full: 100% 宽度和高度
    • 
	

	

		注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

	

		

			实例

		

		
    
			
  1. 
				<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>
    2. 
		

		

			复制

		实例预览 »

	

		内嵌模态框

	

		你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

	

		

			实例

		

		
    
			
  1. 
				<!-- Trigger the modal -->
    2. 
			
  2. 
				<a href="#" class="button" data-reveal-id="myModal">Click To Open Modal</a>
    3. 
			
  3. 
				 
    4. 
			
  4. 
				<!-- The First Modal -->
    5. 
			
  5. 
				<div id="myModal" class="reveal-modal" data-reveal>
    6. 
			
  6. 
				  <h2>First Modal</h2>
    7. 
			
  7. 
				  <p>Some text..</p>
    8. 
			
  8. 
				  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
    9. 
			
  9. 
				  <a class="close-reveal-modal">&times;</a>
    10. 
			
  10. 
				</div>
    11. 
			
  11. 
				 
    12. 
			
  12. 
				<!-- The Second Modal -->
    13. 
			
  13. 
				<div id="secondModal" class="reveal-modal" data-reveal>
    14. 
			
  14. 
				  <h2>Tada! Second Modal</h2>
    15. 
			
  15. 
				  <p>Some text..</p>
    16. 
			
  16. 
				  <a class="close-reveal-modal">&times;</a>
    17. 
			
  17. 
				</div>
    18. 
		

		

			复制

		实例预览 »

	

		第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加 data-options="multiple_opened:true;" 属性：

	

		

			实例

		

		
    
			
  1. 
				<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
    2. 
		

		

			复制

		实例预览 »

	

		 






      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程