I'm using bootstrap - how can I make this auto-open? Instead of having the href="#Register" initiation can I make it auto-load if the if statement is true? Thanks.
<?php
require 'header.php';
require 'center.php';
require 'footer.php';
if(!isset($_SESSION['pay_address'])) {
?>
<li><a data-toggle="modal" href="#Register">Register</a></li>
<!--- Register Modal -->
<div class="modal fade" id="Register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Deposit Funds</h4>
</div>
<div class="modal-body">
<p>Your unique deposit address for GigaDice is: <strong>1HXtoMuv6xU1rLGfn6C9z9H6REHEtAs1gW</strong></p>
<p> If you have cookies disabled or clear them regularly, be sure to save your account ID and password.
</p>
<p>Alternatively, pay with Coinbase. Coinbase allows for instant deposits!</p>
<a class="coinbase-button" data-code="08409eb5d732affc131087bd72c48724" data-button-style="custom_small" href="https://coinbase.com/checkouts/08409eb5d732affc131087bd72c48724">Pay With Bitcoin</a><script src="https://coinbase.com/assets/button.js" type="text/javascript"></script>
<p>Alternatively, pay with Inputs.io. Inputs.io allows for instant deposits!</p>
<script src='https://inputs.io/js/buttons.js'></script>
<a href='https://inputs.io/pay?to=Loker' class='inputsio' data-success='You may need to refresh the page.' data-to='Loker' >Fund Account</a>
<br /><br /><p>If your deposit does not go through, e-mail deposits#gigadice.com.</p>
<p>Remember to click your balance to see if it has updated!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<!--- End Register Modal -->
<?php
}
?>
After modal code, you can add this:
<script type="text/javascript">
$(function(){
//instantiate your content as modal
$('#Register').modal({
//modal options here, like keyboard: false for e.g.
});
//show the modal when dom is ready
$('#Register').modal('show');
});
</script>
Will open modal as soon the DOM is ready. Put inside the php if so it only shows when modal html shows.
More info at: http://getbootstrap.com/javascript/#modals
If you add data-show=true to the markup, it should fire it straight up.
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>
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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"><?= 'Some kind of title' ?></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>
I would like to have a popup windows on screen if a variable is set to 1, Im using PHP to load the page. So lets say I have the variable $Flag. on page load if the variable is 1 show the popup until the user click close. if $flag is set to 0 load the page as normal.
Im able to create a modal for the pop up and get the variable from the database, but how can i put those 2 together?
PHP Code:
if(isset($_SESSION['CurrentUser'])) {
$AppID=$_SESSION['CurrentUser'];
$ApplicantDetailsSQL=mysql_query("SELECT Accepted FROM Applicant WHERE AppID = '$AppID'");
$ApplicantDetails = mysql_fetch_assoc($ApplicantDetailsSQL);
if ($ApplicantDetails['Accepted'] == '1') {
//Show modal
}
}
HTML Code:
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The HTML Modal is copy/paste from W3School.
Solution PHP:
if(isset($_SESSION['CurrentUser'])) {
$AppID=$_SESSION['CurrentUser'];
$ApplicantDetailsSQL=mysql_query("SELECT Accepted FROM Applicant WHERE AppID = '$AppID'");
$ApplicantDetails = mysql_fetch_assoc($ApplicantDetailsSQL);
if ($ApplicantDetails['Accepted'] == '1') {
$modal = true;
}
else{
$modal = false;
}
}
HTML:
<?php if($modal)
echo "<script type='text/javascript'> $(window).load(function(){ $('#myModal').modal('show'); }); </script>";
?>
</div> <!-- /container -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">You are already a student</h4>
</div>
<div class="modal-body">
<p>You have already been accepted to one of our courses. This website is for application puproses only.</p>
<p>Since you are already a student, most of the functionality has been disabled for your account. Please login to the university's student portal for further.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I want to display a modal by checking if a PHP session exists, the following is the code :
<?php if(isset($_SESSION['login'])) { ?>
<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">Modal header</h3>
</div>
<div class="modal-body">
<p>Body</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script>$("#myModal").modal("show");</script>
<?php } ?>
This is not working.
I have also referred previous similar questions but they do not give a clear picture.Please help.
First, I would suggest to separate the .js file from the .php
Because -sometimes- I also need to run php code in my js files, this is a little "trick" that I like to do:
The js file, should have extension .php (in order to trigger the php interpreter) and thus the filename could look something like that: scripts.js.php. Here I also assume that you have your main file called for example: index.php.
Now, let's bake the cake:
Sample of the index.php file:
<html>
<head>
<!-- here include your head elements and styling -->
<link href="path/to/bootstrap.css" rel="stylesheet">
<link href="path/to/other.css" rel="stylesheet">
</head>
<body>
<!-- here goes the body code -->
<!-- my practice is to include the modal code and scripts at the end of the file -->
<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">Modal header</h3>
</div>
<div class="modal-body">
<p>Body</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<?php
$show_modal="";
if(isset($_SESSION["login"])){$show_modal="1";}else{$show_modal="0";}
include("scripts.js.php");
?>
</body>
</html>
And here is my suggestion for the scripts.js.php file:
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<script src="path/to/otherfile.js"></script>
<script>
$(document).ready(function(){
var showModal = '<?php echo $show_modal; ?>';
if(showModal=="1"){$("#myModal").modal("show");}
});
</script>
This is a solution that always work for me... Hope it works for you too!
I'm developing website in php using codeigniter.I need to add pop window when in click "Book now" button in my view (profile.php) following code is working perfectly in HTML Page without any problem but when i mix php tags the pop up window come and disperser quickly.this is the code that i using i can't find the problem and heed quick help,Can some one explain the error in here?
this is the code that using
<button class="btn btn-danger" id="buy-btn">BOOK NOW</button>
<!-- Modal -->
<div class="modal fade" id="moreInfo" tabindex="-1" role="dialog" aria-labelledby="moreInfoLabel" 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="moreInfoLabel"><?php echo $package_data['PackageTitle']; ?></h4>
</div>
<div class="modal-body">
<p>Number of Peaple :<?php echo $tour_data['Visitors']?></p>
<p>Itenaries : Elephant Blues, Gallface, Brown Circus, Nelum Tower</p>
<p>Method of Travel : Taxi Service</p>
<p>Total Time Estimated : 6 Hours</p>
<hr>
<h4>Terms and Conditions</h4>
<p><?php echo $tour_data['TermsAndConditions']; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary center-block">Book Now</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Try this:
<button class="btn btn-danger" id="buy-btn" onclick="$('#moreInfo').modal({show: true});">BOOK NOW</button>