I have converted my PHP website to a WordPress theme but my bootstrap modal is not opening in WordPress.
***Header.php***
<a id="modal_trigger" href="#modal" ><i ></i> Sign In/Up</a>
<div id="modal" role="dialog" >
<div >
<span >Login</span>
<span ><i ></i></span>
</div>
<section >
<div >
<div >
<a href="#" >
<span ><i ></i></span>
<span >Connect with Facebook</span>
</a>
<a href="#" >
<span ><i ></i></span>
<span >Connect with Google</span>
</a>
</div>
<div >
<span>Or use your Email address</span>
</div>
<div >
<div ><a href="#" id="login_form" >Login</a></div>
<div ><a href="#" id="register_form" >Sign up</a></div>
</div>
</div>
<div >
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div >
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div >
<div ><a href="#" ><i ></i> Back</a></div>
<div ><button type="submit" >Login</button></div>
</div>
</form>
<a href="#" >Forgot password?</a>
</div>
<div >
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div >
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div >
<div ><a href="#" ><i ></i> Back</a></div>
<div ><button type="submit" >Register</button></div>
</div>
</form>
</div>
</section>
</div>I tried hard but did not find any solution. I have imported all the necessary files like bootstrap and js but still modal is not working. I have a header.php file in which I have an anchor tag and I want to open a modal when clicking on it.
CodePudding user response：
Maybe you didn't enqueue bootstrap properly. first, enqueue your bootstrap CSS and JS. For enqueue, your style & JS WordPress has an action hook.
wp_enqueue_scripts
You have to do that inside your fuctions.php
function your_scripts() {
wp_enqueue_style( 'style-name', get_template_directory_uri().'/your_path/your.css' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/your_path/your.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle is the name for the script. $src defines where the script is located. $deps is an array that can handle any script that your new script depends on, such as jQuery. $ver lets you list a version number. $in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather than in the header so that it does not delay the loading of the DOM tree. for Know, more details follow the below link. [https://developer.wordpress.org/reference/functions/wp_enqueue_script/][1]
Now enqueue your style and CSS and try your modal.
CodePudding user response：
Your <a> tag needs data-toggle="modal" and data-target="#modal" attributes. See the Bootstrap 4 modal documentation.
***Header.php***
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<a id="modal_trigger" href="#modal" data-toggle="modal" data-target="#modal"><i ></i> Sign In/Up</a>
<div id="modal" role="dialog" >
<div >
<span >Login</span>
<span ><i ></i></span>
</div>
<section >
<div >
<div >
<a href="#" >
<span ><i ></i></span>
<span >Connect with Facebook</span>
</a>
<a href="#" >
<span ><i ></i></span>
<span >Connect with Google</span>
</a>
</div>
<div >
<span>Or use your Email address</span>
</div>
<div >
<div ><a href="#" id="login_form" >Login</a></div>
<div ><a href="#" id="register_form" >Sign up</a></div>
</div>
</div>
<div >
<form action="" method="post">
<label>Email / Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div >
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div >
<div ><a href="#" ><i ></i> Back</a></div>
<div ><button type="submit" >Login</button></div>
</div>
</form>
<a href="#" >Forgot password?</a>
</div>
<div >
<form action="" method="post">
<label>Username</label>
<input name="username" type="text" id="username" />
<br />
<label>Email Address</label>
<input name="email" type="email" id="email" />
<br />
<label>Password</label>
<input name="password" type="password" id="password" />
<br />
<div >
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div >
<div ><a href="#" ><i ></i> Back</a></div>
<div ><button type="submit" >Register</button></div>
</div>
</form>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>