Modal not working

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Modal not working

even pro asked 8 years ago

Hi, I'm having issues with modals in MCbootstrap. It won't toggle. Head 
<html lang="en">
  <head>
  	<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">
		html,
		body {
		  min-height: 100%;
		  min-width: 100%;
		  width: 100%;
		  height: 100%;
		  padding: 0px;
		  margin: 0px;
		  color: #fff; }
/*		body {
		    overflow:hidden;
		}*/

		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;}
    </style>
	<title></title>
</head>
Scripts 

<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>
    </a>
</div>

<!-- Modal -->
<div class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!--Content-->
        <div class="modal-content">
            <!--Header-->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <!--Body-->
            <div class="modal-body">
                ...
            </div>
            <!--Footer-->
            <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>
            </div>
        </div>
        <!--/.Content-->
    </div>
</div>
<!-- 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.

even pro answered 8 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 commented 4 years ago

can you explain for me?

Edyta Dabrowska answered 8 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,
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

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
About author
even
Pro User
15Support score
4Questions 3Answers
0Snippets likes 0Snippets