Dave G. Dave G. - 3 months ago 26
CSS Question

Bootstrap button pop up message

I have a button on my page and I want it to display a pop up box when its clicked however I have tried few things and it doesnt work

I want to make that button to display message when its clicked.

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i>  Find out more</button>

<div id="moreinfo" class="modal fade" role="dialog">

<div class="modal dialog">

<div class="modal-content">

<div class="modal-header">
fds
</div><!--end of modal header-->

<div class="modal-content">
fds
</div><!--end of modal content-->

<div class="modal-footer">
fds
</div><!--end of modal footer-->

</div><!--end of modal content-->

</div><!--end of modal dialog-->

</div><!--en dof more info div-->


With this code all I get is the screen fades out when the button is clicked but it doesnt display anything.

I have got the following too

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer

You have 2 typos in your code:

  1. <div class="modal dialog">

    There should not be any space between modal dialog. Its one class modal-dialog.

  2. You are missing modal-body inside modal. Instead you have used modal-content twice. It should have the structure as per Bootstrap's Documentation.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom" data-toggle="modal" data-target="#moreinfo"><i class="fa fa-thumbs-up"></i>  Find out more</button>

    <div id="moreinfo" class="modal fade" role="dialog">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">
                fds
                </div><!--end of modal header-->

                <div class="modal-body">
                fds
                </div><!--end of modal body-->

                <div class="modal-footer">
                fds
                </div><!--end of modal footer-->

            </div><!--end of modal content-->

        </div><!--end of modal dialog-->

    </div><!--en dof more info div-->