HTML 弹出框功能

时间:2025-03-02 07:26:42

HTML 弹出框功能

demo如下:
1、定义按钮触发弹出框

<button class="btn btn-info btn-sm"  data-target="#myModal_add_part" data-toggle="modal" title="添加部門機台消耗性零件">添加部門、站別機台消耗性零件</button>

2、设置弹出框布局

	<div class="modal fade" id="myModal_add_part" tabindex="-1" role="dialog" aria-labelledby="myModalLabel_add_state">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel_add_part">添加部門、站別機台消耗性零件</h4>
	      </div>
	      <div class="modal-body">
	        <!-- ... 此處添加動態框佈局-->
	        
	      </div>
		  <div class="modal-footer">
		    <!-- <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> -->
		    <button type="button" class="btn btn-primary" onclick="add_part()">添加</button>
		  </div>
	   
	    </div>
	  </div>
	</div>

3、弹出框的按钮点击事件

function add_part(){
	alert("我是弹出框按钮点击事件")
}