Bootstrap Modal Example
जब भी आपको कोई PHP पेज किसी डायलॉग बॉक्स में ओपन करवाना हो तो Bootstrap Modal बहुत उपयोगी होता हैं मोडल के लिए आपको 4 स्टेप्स करना होती हैं
- Head में Bootstrap और jQuery ऐड करना
- Body में कही पर भी Modal का कोड रखना
- जो भी आपकी जस फाइल हो उसे या जहा पर JavaScript का कोड लिखा हो वहा Modal का JavaScript वाला कोड लिखना
- जहा से कॉल करवाना हो वह पर बटन लगाना
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">×</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
- MySQL Aggregate Function
- MySQL Stored Procedures
- MySQL Trigger (Before/After)
- PHP Form Validations, Required, Filter
- PHP MySQL Connection
- Dropdown Retrieve from MySQL
- Learn C (Single Page Summary)
- Arduino Guide 2021 (Hindi)
- कीबोर्ड शॉर्टकट्स
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
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">×</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 कैसा लगा हमे जरूर बताए , अपना कीमती समय देने के लिए धन्यवाद
