Bootstrap Modal Example

जब भी आपको कोई PHP पेज किसी डायलॉग बॉक्स में ओपन करवाना हो तो Bootstrap Modal बहुत उपयोगी होता हैं मोडल के लिए आपको 4 स्टेप्स करना होती हैं

  1. Head में Bootstrap और jQuery ऐड करना
  2. Body में कही पर भी Modal का कोड रखना
  3. जो भी आपकी जस फाइल हो उसे या जहा पर JavaScript का कोड लिखा हो वहा Modal का JavaScript वाला कोड लिखना
  4. जहा से कॉल करवाना हो वह पर बटन लगाना

1. CDN

		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  • यदि आप पहले से किये हुए कोड में Modal लगा रहे हैं तो फिर आपको यह ऐड करने की जरुरत नहीं
  • JQuery को पहले ऐड नहीं करे और कोड चला कर देखे यदि Console पर Jquery की Error आये तो फिर JQuery की CDN भी ऐड करे

2. Modal HTML Code

<div class="modal " id="InfoModal" tabindex="-1" role="dialog" aria-labelledby="InfoModalLabel" aria-hidden="true">        
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header primary">
				<h5 class="modal-title" id="LoginModalLabel">Profile</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" id="InfoModal_id"></div>
			<div class="modal-footer">
				<button type="button" id="btn_close" class="btn btn-info" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>


हमारे अन्य ARTICLE


3. Modal Script Code

यहाँ पर आप जो भी Modal ओपन होगा उसमे Dynamic जो भी PHP पेज ओपन करना हैं उसको लिख सकते हैं

<script>
$('#InfoModal').on('show.bs.modal', function (event) 
	{
	var button = $(event.relatedTarget) // Button that triggered the modal
	var data_cmd = button.data('cmd') // Extract info from data-* attributes         
	var data_val = button.data('value') // Extract info from data-* attributes
	//var ls_a  = $('#a').val(); 
	//var ls_b  = $('#b').val();
	//var ls_pname = 'php_page_name.php?a='+ls_a+'&b='+ls_b + '';
	//$("#InfoModal_id").load(ls_pname);     
	}
);
</script>
  • यहाँ पर data_cmd वाले पर कंडीशन लगा कर आप एक ही Modal में अलग अलग पेज ओपन कर सकते हैं

4. Modal Button

यह कोड आपको जहा से Modal ओपन करना हैं वह पर लिखना हैं यहाँ पर से आप दो Value पास भी कर सकते हैं cmd और value इन दोनों Value उपयोग करके आप एक ही Modal को अलग- अलग तरीके से काम में ले सकते हैं

	<input type="button" style="" class="btn btn-success" value="Profile" data-toggle="modal" data-target="#InfoModal" data-cmd="OPEN" data-value="111"/>

आप यहाँ से अलग अलग टाइप CMD सेंड करके एक ही Modal का उपयोग अलग अलग पेज ओपन करने के लिए भी कर सकते हैं

यह कोड Bootstrap Official वेबसाइट से लेकर हमने हमारी Requirement के हिसाब से कुछ Change किये थे, कोड Tested हैं आप भी उपयोग कर सकते हैं ।

Output

Boostrap Modal Example

Full Code

<HTML>
   <HEAD>
   <TITLE>Bootstrap Modal Example</TITLE>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </HEAD>

   <BODY>
<div class="modal " id="InfoModal" tabindex="-1" role="dialog" aria-labelledby="InfoModalLabel" aria-hidden="true">        
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header primary">
				<h5 class="modal-title" id="LoginModalLabel">Profile</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" id="InfoModal_id"></div>
			<div class="modal-footer">
				<button type="button" id="btn_close" class="btn btn-info" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

		<input type="button" style="" class="btn btn-success" value="Profile" data-toggle="modal" data-target="#InfoModal" data-cmd="OPEN" data-value="111"/>		
		
<script>
$('#InfoModal').on('show.bs.modal', function (event) 
	{
	var button = $(event.relatedTarget) // Button that triggered the modal
	var data_cmd = button.data('cmd') // Extract info from data-* attributes         
	var data_val = button.data('value') // Extract info from data-* attributes
	//var ls_a  = $('#a').val(); 
	//var ls_b  = $('#b').val();
	//var ls_pname = 'php_page_name.php?a='+ls_a+'&b='+ls_b + '';
	//$("#InfoModal_id").load(ls_pname);     
	}
);
</script>
   </BODY>
<HTML>

आपको Bootstrap Modal Article कैसा लगा हमे जरूर बताए , अपना कीमती समय देने के लिए धन्यवाद

Add a Comment

Your email address will not be published. Required fields are marked *