Modal not working

Topic: Modal not working

even pro asked 6 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.

Add comment

Edyta Dabrowska free answered 6 years ago

0 0 Best answer

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,

Add comment

even pro answered 6 years ago

0 0 Best answer

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 3 years ago

can you explain for me?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

even

Pro User 15Support score
4Questions 3Answers 0Snippets