I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.
Related
I'm trying to get a Bootstrap 4 Modal to pop up on an Order Received page after a 2-second delay on WordPress. I'm new to theme customization. This is what I have, but I can't get the HTML to print on the page.
I want to hook into: do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> on thankyou.php. I also want the modal to popup on page load. The JS I found for that would be:
<script type="text/javascript">
$(window).on('load',function(){
$('#exampleModal').modal('show');
});
</script>
In the Thankyou page body class, it shows page-id-8 as the page ID.
In my functions.php file, I have the following:
Questions:
For some reason, the HTML is not printing on the page. Any ideas on what else I can do?
What would be the next steps for adding a <script></script> tag on the same page to add a setTimeout function to delay it?
Code:
function create_modal() {
if(is_single('8')) {
echo '
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">A NOTE ON SHIPPING</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Thank you so much for your order! As we\'re sure you\'re aware, we are a little backed up due to COVID-19.</p>
<p>While we work hard to get your order out in a timely manner, we sincerely appreciate your understanding and patience.</p>
<p>When your order ships, you\'ll receive an email with tracking information attached. Please keep an eye out for your package. Also note that FedEx and USPS are also backed up due to COVID-19, and delivery times may also be delayed.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">CLOSE</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
</div>
</div>
</div>
</div>';
}
}
add_action('woocommerce_thankyou_', 'create_modal', 10);
I have a page of links to internal pages I need to open up in a Bootstrap modal DIV. The problem is that it seems that using the latest version of Bootstrap v3 in conjunction with jQuery v2.1.4 just doesn't work when it comes to loading content this way. There's plenty of tutorials I've read about creating modals with Bootstrap and how remote content is being phased out. But there's got to be away to make this work with jQuery, or maybe not.
The theory is that when you click
<a class="" href="/log/viewslim?id=72" title="View" data-target="#myModal" data-toggle="modal">View 72</a>
the content of data-load-remote is supposed to be read and injected into the div with class modal-body.
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
However, when I try this example with jQuery v2.1.4 and BS v3.3+, what it does is open up a modal window with grey background but all the styling of the modal window is gone. Meaning it seems to only display the modal-body div, but the modal header, pretty modal frame and bottom buttons in modal-footer div are not displayed at all. The only way to close the box is to click outside the modal box.
I've found examples all around about how to open up remote urls this way, but they all use outdated version of bootstrap, not the version I'm working with. Can anyone shed some lights on this please?
So basically, in jquery what we can do is to load href attribute using the load function. This way we can use the url in <a> tag and load that in modal-body.
<a href='/site/login' class='ls-modal'>Login</a>
//JS script
$('.ls-modal').on('click', function(e){
e.preventDefault();
$('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
});
From Bootstrap's docs about the remote option;
This option is deprecated since v3.3.0 and has been removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.
If a remote URL is provided, content will be loaded one time via jQuery's load method and injected into the .modal-content div. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
That's the .modal-content div, not .modal-body. If you want to put content inside .modal-body then you need to do that with custom javascript.
So I would call jQuery.load programmatically, meaning you can keep the functionality of the dismiss and/or other buttons as required.
To do this you could use a data tag with the URL from the button that opens the modal, and use the show.bs.modal event to load content into the .modal-body div.
HTML Link/Button
Click me
jQuery
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});
A different perspective to the same problem away from Javascript and using php:
<a data-toggle="modal" href="#myModal">LINK</a>
<div class="modal fade" tabindex="-1" aria-labelledby="gridSystemModalLabel" id="myModal" role="dialog" style="max-width: 90%;">
<div class="modal-dialog" style="text-align: left;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<?php include( 'remotefile.php'); ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and put in the remote.php file your basic html source.
e.relatedTarget.data('load-url'); won't work
use dataset.loadUrl
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = e.relatedTarget.dataset.loadUrl;
$(this).find('.modal-body').load(loadurl);
});
If using #worldofjr answer in jQuery you are getting error:
e.relatedTarget.data is not a function
you should use:
$('#myModal').on('show.bs.modal', function (e) {
var loadurl = $(e.relatedTarget).data('load-url');
$(this).find('.modal-body').load(loadurl);
});
Not that e.relatedTarget if wrapped by $(..)
I was getting the error in latest Bootstrap 3 and after using this method it's working without any problem.
In bootstrap-3.3.7.js you will see the following code.
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
So the bootstrap is going to replace the remote content into <div class="modal-content"> element. This is the default behavior by framework. So the problem is in your remote content itself, it should contain <div class="modal-header">, <div class="modal-body">, <div class="modal-footer"> by design.
I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong
I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.
I have a page with several bootstrap modals with:
data-toggle="modal" data-target="#modal-12345"
The problem is, I have an entire table row that is clickable, like
<tr data-toggle="modal" data-target="#modal-12345">
The modal content is in another hidden table row right below, followed by the next clickable row and so on. Now, this row also contains a button that will go to another page when clicked.
I need the entire row clickable so it opens the modal, except when the button to go to the other page is clicked, then I need to stop the modal from opening.
I need something like this
<script>
$('.ID').on('click', '.btn', function(e) { e.stopPropagation(); })
</script>
But targeting this:
data-toggle="modal"
I also tried giving the TR a class of "modaltoggle" and then calling it with the javascript as .modaltoggle but that didn't work either.
Add some kind of identifier for the item you don't want to trigger the modal, a class like no-modal for example, then in your jQuery add code for the modal's show.bs.modal event. Capture the relatedElement, which is the element that triggered the event, then see if it has the class you're looking for. If it does, run e.stopPropagation().
BOOTPLY
jQuery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($(button).hasClass('no-modal')) {
e.stopPropagation();
}
});
HTML:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Header</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
As you can see, the second button has a class called no-modal. When clicked, the jQuery checks for the existence of that class, and if it exists it prevents the modal from popping. Clicking the first button causes the modal to pop normally because it doesn't have that class.
Bootstrap modals trigger specific events when they're popped by an element on the page, from the moment they're triggered through the moment they've fully popped. You can read about these events to get an idea of what you can use them for by checking the Events section for Bootstrap modals in the official documentation.
$('#myModal').on('show.bs.modal', function (e) {
return e.preventDefault();
});
OR
<button type="button" class="custom" data-toggle="modal" data-target-custom="#myModal">Launch demo modal</button>
<script>
target = $(".custom").attr('data-target-custom');
if(condition) {
$(target).modal('show');
}
</script>
e.stopPropagation(); or e.preventDefault(); it will not work if you going reopen modal or if multiple modal used in your page.
Here's a JSFiddle to demo what I'm about to explain: http://jsfiddle.net/68y4zb3g/
As MattD explained and demonstrated, preventing a modal from launching is fairly easy, though his example applies to standard modal application. Since you use the .btn in your script code, I assume you applied it to all your buttons in question. I've also assumed that you kept the modal code similar to that on the Bootstrap demo page. If you provide your actual table code, I can tailor it specifically to what you already have.
$('tr .btn').on('click', function(e) {
e.stopPropagation();
});
td {
border: 1px #000000 solid;
padding: 10px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
<tr data-toggle="modal" data-target="#modal-12345">
<td>Launch modal 12345</td>
<td><button id="btn-12345" class="btn">12345</button></td>
</tr>
<tr>
<td colspan="2" class="modal fade" id="modal-12345" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
12345
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
</tr>
</table>
Note: I substituted the DIV that would normally act as the outer wrapper of the modal for the TD and added a tidbit of CSS to make it a little easier to see the separation in content.
By using a class that is applied to all the buttons, you don't have to write a function for every single ID. Having said that, I recommend using a custom class as your trigger. .btn is a standard class within the core of Bootstrap, so try using .modalBtn, to prevent any potential for conflict with legitimate Bootstrap functionality.
Hope this helps. ^^
Remove following line from your code:
data-toggle = "modal"
Then, in your function once your validation is done, write following code:
$('#myModal').modal({
show: 'true'
});