even pro asked 5 years ago

Hi, I'm having issues with modals in MCbootstrap. It won't toggle. Head
<html lang="en">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link href="css/mdb.min.css" rel="stylesheet">

    <style type="text/css">
		body {
		  min-height: 100%;
		  min-width: 100%;
		  width: 100%;
		  height: 100%;
		  padding: 0px;
		  margin: 0px;
		  color: #fff; }
/*		body {

		body {
		 height: 100%;
		  width: 100%;
		  background-image: url('https://tobiesen.com/BG.jpg');
		  background-size: cover;
		  background-position: 50% 50%; 
		  font-family: 'Roboto', sans-serif;
		.hidden {display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="particles.min.js"></script>
Modal / trigger code

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large pink" data-toggle="modal" data-target="#basicExample">
        <i class="fa fa-envelope"></i>

<!-- Modal -->
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-hidden="true">
    <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">&times;</span>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            <div class="modal-body">
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
<!-- Modal -->
I have tried to load all scripts from CDN, all from the bundle, and also copy/pasted codes directly from the examples. If I open the file and remove display: none, the modal shows fine, but I can't close nor trigger it from the button. It seems to be related to the fade.

Edyta Dabrowska free answered 5 years ago

Hello, It seems that the <div class="fixed-action-btn"> is causing you problem. If you remove this div the pink button works fine. Try maybe positioning it in CSS. Regards,

even pro answered 5 years ago

In the meantime I've "fixed" it like this. But still looking for a working solution without jQuery .
$('#trigger').click(function () {
	$('#basicExample').modal({show : true});

sơn phan free commented 1 year ago

can you explain for me?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No