Model is very important UI for any website, normally every website use modal box to show message, add and edit data etc. Here, We will learn how to create popup box based on http URL.The url can be separate file or mvc based url.
I will use window manager class to create model box.The open method takes class name,window id and content url as parameters.
Since remote_url
option has been deprecated on bootstrap v3.3.0 and will be removed in v4, so we have used or calling jQuery.load
method to load content in modal window.
The main benefit of jQuery's load method
is the modal content will be dynamic instead of static or loaded one time like remote URL
.
Yo can also Checkout other Modal Box tutorial,
load()
methodStep 1: We have included all bootstrap and jquery files into index.php
file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Let’s create a button open modal box –
<div class="container "> <div class="jumbotron"><a id="modellink" class="btn btn-primary pull-right" href="#myModal" data-toggle="modal">Show Modal</a></div> <div class="modal-container" style="display: none;"></div> </div>
In above code, Created a link which is used to show bootstrap modal window.
Step 2: We have created modal window file modalbox.php
and added below code into this file.
<div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Sample Model Box - Header Area</h4> </div> <div class="modal-body"><form> <div class="form-group"><label class="control-label" for="recipient-name">Recipient:</label> <input id="recipient-name" class="form-control" type="text" /></div> <div class="form-group"><label class="control-label" for="message-text">Message:</label> <textarea id="message-text" class="form-control"></textarea></div> </form></div> <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save</button></div> </div> </div> </div>
Step 3: Let’s call jquery load()
method using target modal URL file path and show modal popup.
<script type="text/javascript"> $(document).ready(function(){ var url = "modalbox.php"; jQuery('#modellink').click(function(e) { $('.modal-container').load(url,function(result){ $('#myModal').modal({show:true}); }); }); });
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More
View Comments
hello. i cant reopen closed modal. is there any solution? please check your example.
1. open modal.
2. then close.
3. open modal again.
4. close again.
5. open modal if u can
6. if opened close modal if you can.
this is my big problem.
i just found a solution. if you add following code to js, you can open and close as you like...
$(document).on("hidden.bs.modal", "#myModal", function () {
$('#myModal').remove(); // Remove from DOM.
});
i just add above the "" tag.
Is there an option to give the URL as a variable so the script can be used for different buttons opening the same modal but with different content?
Thanks a lot in advance
Hi
with jQuery 3 load() is deprecated
is there another solution?
thanks
jquery 3 have load alternate is .on("load", fn).