I went through all possible questions related to Twitter Bootstrap modals but my problem is kind of unique over here.
I have included the files from the latest bootstrap release, so my public directory has -
css/
| bootstrap.css
| bootstrap.min.css
js/
| bootstrap.js
| bootstrap.min.js
I am also using Select2 and I have checked that it is not interfering with the bootstrap files.
My modals are defined this way -
<div class="modal hide fade" id="modal-<?php echo $user_role->id ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Update “{{ $user_role->role_name }}”</h3>
</div>
<div class="modal-body">
<label>New Value</label>
<input type="hidden" name="inputId" value="<?php echo $user_role->id ?>">
<input type="text" name="inputUpdate" value="<?php echo $user_role->role_name ?>" autofocus>
</div>
<div class="modal-footer">
Cancel
<a rel="update" href="<?php echo url('admin/dashboard/controls/update_master') ?>" class="btn btn-primary">Update</a>
</div>
</div>
And to call the modal, the button is defined like this -
<a rel="edit" data-toggle="modal" href="#modal-<?php echo $user_role->id ?>" class="btn btn-info">Edit</a>
The JS that runs on the page is -
$(document).ready(function() {
var urlModal;
$('a[rel="edit"]').click(function() {
urlModal = $(this).attr('href');
$(urlModal).modal();
});
});
Whenever I click on the <a rel="edit"> button, the modal appears and immediately goes away.
I just figured out the problem.
$('a[rel="edit"]').click(function() {
urlModal = $(this).attr('href');
$(urlModal).modal();
});
The $(urlModal).modal(); part wasn't required. The code in the HTML part of the button, itself shoots the modal. And this query was closing it.
Now, its working.
Related
I'm a bit new to jquery.
Currently, I have a contact 7 form on wp, and have created the function below in order to have a modal popup with a successful submission. However, while it works as intended, when the popup modal appears, the screen goes a tad darker, and neither the 'back to home' or close button will function - or anything else on the page for that matter.
The website is Deltadesigns.co -- Feel free to submit a form -- the inspect shows no errors in the console .
The code is as follows:
<div class="col-md-9 col-sm-10">
<div class="contact-form" id="contact-id">
<?php echo do_shortcode("[contact-form-7 id=\"86\" title=\"Contact form 1\" html_class=\"form-group\"]"); ?>
</div>
</div>
<div class="modal-fade" id="submitModal" tabindex="-1" role="dialog" aria-labelledby="submitModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="submitModalLabel">Success!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thanks for reaching out! We'll reply within 1-2 business days.
</div>
<div class="modal-footer">
<a button type="button" href="https://deltadesigns.co/" class="btn btn-primary">Back to Home</button></a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '86' == event.detail.contactFormId ) { // Change 123 to the ID of the form
jQuery('#submitModal').modal('show'); //this is the bootstrap modal popup id
}
}, false );
</script>
<?php } ?>
<script type="text/javascript">
document.querySelector('.close').addEventListener('click',
function(){
document.querySelector('.modal-fade').style.display='none';
});
</script>
<?php
get_footer();
?>
The problem was that the jquery function, bootstrap, or wordpress perhaps, added in a modal-backdrop element which I hadn't thought to look for, and the Z-index of the class was set higher than all other elements.
Once I changed it to be below that of the popup, all was well.
Here is the error in the modal-footer:
<div class="modal-footer">
<a button type="button" href="https://deltadesigns.co/" class="btn btn-primary">Back to Home</button></a>
</div>
The <a> and <button> tags are merged in your code.
Try this:
<div class="modal-footer">
<button type="button" class="btn btn-primary">Back to Home</button>
</div>
I need your help here please.I have a button which is echoed by a PHP file to a HTML file.When the button is clicked then I want a modal to be displayed in the HTML file.Does anyone have any idea how I can make this work?
PHP echo:
'<div class="modal fade" id="modelWindow" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">'. $row['title'] .'</h4>
</div>
<div class="modal-body">
<img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
<p class="well">'. $row['description'] .'<p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
</div>
<div class="col-md-6">
<h3>'. $row['title'] .'</h3>
<p class="well">'. $row['description'] .'<p>
<div class="row top-buffer">
<div class="col-md-5 col-md-offset-1">
<img src="img/link_icon.png" class="img-rounded" width="20px" height="20px"/>
LINK
</div>
<div class="col-md-6">
<button class="btn btn-primary pull-right" id="btn">More...</button>
</div>
</div>
</div>
</div>'
The first part is the modal box and the second is the HTML output
Script to triggger the modal:
<script type="text/javascript">
$("#btn").click(function() {
$("#modelWindow").modal("show");
});
</script>
Do I need to add the script to a external file and call it inside php or there is another way to do this?Thanks
you can include the script in the php echo just make sure that all dependencies like jQuery and Bootstrap.js is included on the page that will render the echoed data.
Javascript code cannot be triggered by PHP directly because PHP is run on the server, and Javascript is run in the client (eg the browser). So what we need is a way to tell the browser to execute the code.
What you can do though is include the <script> in the string you're building in PHP
'<script type="text/javascript">
$("#btn").click(function() {
$("#modelWindow").modal("show");
});
</script>'
If jQuery and Bootstrap's Javascript have already been loaded when this is inserted into the DOM, the button click will work. If that doesn't work for you, try altering it to:
'<script type="text/javascript">
window.onload = function(){
$("#btn").click(function() {
$("#modelWindow").modal("show");
});
}
</script>'
Putting the code in window.onload guarantees that the browser will run it only after all external scripts are loaded. From the Mozilla Developers Network:
The load event fires at the end of the document loading process. At
this point, all of the objects in the document are in the DOM, and all
the images, scripts, links and sub-frames have finished loading.
there are many ways to trigger a modal if what you want to do is open a modal on an onclick even you can use something like this
echo '<button onclick="$('#showmymodal').modal('show')">click to open modal</button>';
if you want to do it on a php function use this and it will automatically trigger the modal when it is called!
echo "<script>$('#showmymodalnow').modal('show')</script>";
I personally like using the onclick event straight from HTML like this
<button onclick="$('#showmymodal').modal('show')">click to open modal</button>
I hope this helps someone
i have a problem. I have some php script that create list of post in my database.
this is the code
<td><?php echo "$r[date_create]"; ?></td>
<td><?php echo "$r[date_update]"; ?></td>
<td><?php echo "$r[hitcount]"; ?></td>
<td>
<i class="icon-pencil"></i>
<a href="#myModal" role="button" data-toggle="modal" id="<?php $r[id]; ?>">
<i class="icon-remove"></i></a>
</td>
This syntax is calling a modal called MyModal
as you can see, the anchor (
<a href="#myModal"
) getting some id based on database
But i can't by pass the value generated from the php script to my modal window
here's the modal window syntax
<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text">Are you sure you want to delete the post?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<a class="btn btn-danger" data-dismiss="modal" href="delete.php?id=THE ID SHOULD BE HERE ">Delete</a>
</div>
</div>
I want to the ID from anchor above is place on the delete.php?id=THE ID SHOULD BE HERE
how to do that?
thank you in advance
You will have to manually open the modal box, instead of relying on the data attributes to do the job. A pseudo-code could be like this:
$(function() {
// Attach a click handler to your link
$('#modal_opener').click(function() {
// Open the modal box
$('#myModal').modal('show');
// Set the id to the hidden field
$('#id_on_your_modal').val("<?php print $r[id] ?>");
});
});
Remember that the javascript code must be in the same page of your html code, so you can have access to your php variables.
I have this very simple jQuery-script to change modal content based on link. Code:
$('#facebook-friends').on('hidden', function () {
$(this).removeData('modal');
});
And then I can control which content will be used, based on the buttons:
<i class="icon-facebook"></i> Use Facebook
It works perfectly! However, I have links inside this facebook-frame.php file, and I want all actions to stay within the modal, so that the outside page doesn't reload.
I have tried this solution inside facebook-frame.php but it doesn't work.
<a href="facebook-frame.php?all" data-target="#facebook-friends" role="button" class="btn btn-primary" data-toggle="modal">
This is the modal on my mainpage:
<div class="modal fade hide" id="facebook-friends" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Inviter veninder fra Facebook</h3>
</div>
<div class="modal-body text-center">
<p>Loading content...</p>
<p><IMG src="ajax-loader.gif"></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Luk</button>
</div>
</div>
I especially love the "Loading content", as it seems very dynamic.
Is there any way to assign a special command/class/name to links/buttons inside facebook-frame.php so that when clicked it will temporary show the "Loading content" and then meanwhile load the requested page (inside href attribute)?
If I'm understanding correctly, inside facebook-frame.php can you just capture all <a> (or specific <a> classes) click events like so?
$(document).on('click', '#facebook-friends a', function(e) {
e.preventDefault();
// show the "Loading content" message
// load the content and whatever else you need to do
});
Note: .on() requires jQuery 1.7+. Before that you would use .live().
Its very simple but i don't see the solution.
How can I put a php var in this twitter bootstrap popup link?
Read More
And how can i get and print the value of this link in the popup field?
If short tags are enabled:
<a
href="#myModal"
title="Lees meer"
value="12345"
data-toggle="modal"
data-phpvar="<?=$myVariable?>"
>
Read More
</a>
else:
<a
href="#myModal"
title="Lees meer"
value="12345"
data-toggle="modal"
data-phpvar="<?php echo $myVariable; ?>"
>
Read More
</a>
both indented for readability - don't do this in actual HTML, it looks messy.
And to get it in jQuery - .data("variable") automatically gets attributes that start with data-:
$("a[href=#myModal]").click(function() {
alert($(this).data("phpvar"));
});
or use the .attr equivalent:
$("a[href=#myModal]").click(function() {
alert($(this).attr("data-phpvar"));
});
and to output in the modal:
$("a[href=#myModal]").click(function() {
var phpVariable = $(this).attr("data-phpvar");
var modalObject = $($(this).attr("href"));
modalObject.find(".modal-body").text(phpVariable); //You might also use .html()
});
JSFiddle demo of the code working
Thanks a lot h2ooooooo
I have the short tags enabled and I will build the link ass follow:
<a href="#myModal"
title="Bewerken"
role="button"
data-toggle="modal"
data-phpvar="<?php echo $value['i_id_pk'] . '||' . $value['c_user'] . '||'. $value['i_user_type_id_fk'];?>">
<i class="icon-edit"></i>
</a>
I send the values of data-phpvar with JQuery to the #myModal Popup. I use a OnClick event to get the values out of the a href data-phpvar. Like this:
<script>
$("a[href=#myModal]").click(function() {
var str = $(this).attr("data-phpvar");
var substr = str.split('||');
$("[name=user_id]").val(substr[0]);
$("[name=c_chance_user_name]").val(substr[1]);
$("[name=validation_c_user]").val(substr[1]);
$("[name=c_chance_user_type]").val(substr[2]);
$("span.userName").text(substr[1]);
});
</script>
It will work but, can I do this piece of JQuery make shorter or in a better way?
Eventually I put the values out of the a href data-phpvar in the textfields inside the popup. The textfield must have the same name like the JQuery names:
$("[name=user_id]").val(substr[0]);
or
$("[name=c_chance_user_name]").val(substr1);
The html textfield in the popup is like this:
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Wijzig gebruiker "<span class="userName"></span>"</h3>
</div>
<div class="modal-body">
<input class="span3" id="appendedPrependedInput" type="text" name="c_chance_user_name" value="" minlength="3" required />
<input class="span3" type="text" data-validation-match-match="c_chance_user_name" name="validation_c_user" minlength="3" required />
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Sluiten</button>
<button class="btn btn-success" name="chanceBtn"><li class="icon-ok-circle icon-white"></li> Opslaan</button>
</div>
</div>
You can find this popup plug-in on www.twitter.github.com/