I have used bootstrap popup modal but it appears every time on page loads. I have gone through every question & answer in Stackoverflow and tried every code but not worked. That's why I am posting this question again. I am not much familiar with Javascript and I am requesting to post the right code for me. My used codes are below:
<script>
jQuery(window).load(function(){
setTimeout(function(){
jQuery('#myModal2').modal('show');
}, 10000);
});
</script>
<div id="myModal2" 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" style="font-size:18px; text-align:center;">Get The Latest & Best Coupon/Offer Alerts</h4>
</div>
<div class="modal-body">
<h4 style="font-size:16px; text-align:center;">Subscribe to our mailing list to get the latest updates straight in your inbox.</h4>
<hr>
<center><?php echo do_shortcode('[newsletter_form type="minimal"]'); ?></center>
<br>
<h3 class="cb-subnl">We value your privacy & guarantee zero spamming. Subscribe now and receive 1 mail per day. Never miss out on latest coupons, deals and best offers!</h3>
</div>
</div>
</div>
</div>
Related
I am trying to display modal window when a users sessions times out. When the user times out they will get redirected back to the index.cfm?sessiontimeout page. I have the following code in the index.cfm page to fire IF the URL variable exists:
<cfif structkeyexists(URL,'sessiontimeout')>
<script>
//alert('Your session has timed out.');
$('#appTimeOut').modal('show');
</script>
</cfif>
All that happens is I see the modal background but not the modal window. However when I add it as a link in the nav (for testing), it works perfectly.
<a href="##" title="Feedback" data-toggle="modal" data-target="##appTimeOut">
Here is the modal window code:
<div class="modal fade" id="appTimeOut" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h4 class="modal-title">SESSION TIMOUT</h4>
</div>
<div class="modal-body">
Your session has expired.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I've tried moving the and the modal window code between the two pages (index.cfm and header.cfm). Header.cfm is called within index.cfm. Either way, the javascript function doesn't display the modal window as expected. Any help would be greatly appreciated.
I have some issues with Bootstrap modal. When I click to open a modal, it's seems good, but when I close modal it's all black. I noticed that when I click x (close), at the end of code I have 5 of this classes <div class="modal-backdrop fade in"></div>.
Here is the code of modal:
<div class="modal fade product-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<h3 class="modal-title product-title">
{{$prod_name}}
</h3>
</div>
<div class="modal-body">
<div class="product-description">
{{$product->description}}
</div>
</div>
</div>
</div>
</div>
It's in PHP foreach.
Full code: pastebin.com/uZHYqqBu (first modal starts from line 221 and second from line 286).
If you are using the whole modal code inside the foreach then you will have multiple instances of modal element so the functionalities in bootstrap will not work properly since these functionalities are designed for targeting single instance of element.
So, to solve this you have to keep the modal code out of the foreach block and have to populate the data in the modal dynamically on a click event.
we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!
Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.
I am building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.
My original issue:
I know that when this gets coded, the variables get written when the request is sent from the server. So I'll probably have to use JQuery, but I'm lost on where to even start (I don't know JS).
This code works when I refresh the page, but I want it to refresh the data being displayed when the modal is clicked on.
Can anyone point me in the right direction?
My self found fix, for others to view:
Modal Code:
<div class="modal fade ajaxmodal" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
<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" id="myModalLabel">Trace Logging</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
JS:
$('.ajaxmodal').on('show.bs.modal', function () {
$('#modal-body').load('trace.php');
});
trace.php has formatted html that displays on click perfectly.
Updated my original question to contain my answer as well.