Wrap HTML Buttons in a drop-down list
Question
is there a way of wrapping HTML Buttons so that they show in a drop-down list?
I have the following two buttons:
<button type='button' class='btn btn-default' data-toggle='modal' data-
target='#authorize'>Show Demo Card Details</button>
<button type='button' class='btn btn-default' data-toggle='modal'
data-target='#test'>Show Demo Card Details</button>
And I would like them to be accessible from a drop-down list, is this possible with html?
2 answers
solution1
0 ACCPTED 2017-08-11 13:14:23
Based on the markup, I assume you're using Bootstrap. You can't do it with the <select> element using plain HTML. If you are using the rest of the Bootstrap features, then you can make use of Bootstrap's dropdown and do something like the one below. Note that you might need to do event.preventDefault() for the <a> elements inside li and you might need to do some more CSS to make it work like you want it to.
You don't really require a <button> to trigger a modal by the way. For example, changing the last item in the below dropdown to something like this will also work:
<li><a href="#" data-toggle="modal" data-target="#myModal">JavaScript</a></li>
.dropdown li span { display: inline-block; min-width: 100px; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <! -- Bootstrap Dropdown --> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li> <a href="#"> <span>Try this </span> <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#authorize'>Show Demo Card Details</button> </a> </li> <li> <a href="#"> <span href="#">Try another?</span> <button type='button' class='btn btn-default btn-danger' data-toggle='modal' data-target='#myModal'>Show Demo Card Details</button> </a> </li> <li><a href="#" class="bg-info" data-toggle="modal" data-target="#myModal">JavaScript</a></li> </ul> </div> <!-- Example modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </body>
solution2
-3 2017-08-11 12:49:57
you can simply just add like this in your html
<option data-toggle='modal' data-
target='#authorize'>Show Demo #authorize Details</option>
<option data-toggle='modal'
data-target='#test'>Show Demo #test Details</option>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.