stackoom
  简体   繁体   中英

How to open Modal popup on button click

 原文  2016-06-23 08:49:18  5   4    javascript/ jquery/ modal-dialog

Question

I have this link-button:

<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a>

I want onclick hit, a modal popup appears with all the article details.I have tried a lot until now but nothing runs properly.Any ideas?

UPDATED

$(document).ready(function () {
$('#dialog').dialog({
    autoOpen: false
})
$('#btn').click(function() {
    $("#dialog").dialog({
        modal: true,
        height: 600,
        width: 500,

        buttons: {
            Accept: function() {
                $(this).dialog("close");
            }
        }
    });
    $('#dialog').dialog('open');
});
});

UPDATED (image)

结果

4 answers

solution1
 4  2016-06-23 09:35:21

If you are using Bootstrap , please see below example

<div class="modal fade" id="modelWindow" role="dialog">
            <div class="modal-dialog modal-sm vertical-align-center">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Heading</h4>
                </div>
                <div class="modal-body">
                    Body text here
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
                </div>
              </div>
            </div>
        </div>



$('#btn').click(function() {
   $('#modelWindow').modal('show');
});

solution2
 0  2016-06-23 08:53:12

I think the main problem is with this code:

<a href="">

As there is no value in href, so whenever you'll click on the button actually it will click on that anchor tag and the page will refresh. You can use this:

<a href="javascript:void(0);">

Or on the click function you can get the event and use preventDefault.

Hope this will help you. Thanks.

solution3
 0  2021-03-15 14:47:14

I get it without using some custom css or js. It works with bootstrap.js and bootsrap.css.

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>


<!--> Your Dialog Field -->
<div class="dialog">
      Some Text Some Captions and/or images etc..

     <button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
 
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
      <h1>Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals
      Some Text for the Modals</h1>
</div>
</html>

There are better examples ( Bootstrap Modals ), but this works without own js.

solution4
 0  2022-05-31 15:42:35

You can follow instructions to use Booststrap Modal Popup

Step:-1

Add Bootstrap Modal Container

**Step:-2** Add Button to Show Modal Popup Save 
 function getBuiltyUpdateForm(id, dcNo) { $('#builtyUpdateModal').modal('show'); } function saveRecord() { alert{"It's Working"} }
 <a onclick="getBuiltyUpdateForm()" class="btn btn-sm btn-warning btn-lg mtn-xs"><i class="fa fa-plus" title="Update"></i></a> <div class="container"> <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>DC Number</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <label>Builty Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled /> </div> <p id="builtyDate"></p> </div> <div class="col-md-6"> <input type="hidden" id="hdndcId" /> <label>Builty Number</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
**Step:-3** Write HTMl Code For Modal × Add Builty Number DC Number Builty Date

Builty Number

Submit Close 
 function saveRecord(){ alert("It's Working") }
 <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>DC Number</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <label>Builty Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled /> </div> <p id="builtyDate"></p> </div> <div class="col-md-6"> <input type="hidden" id="hdndcId" /> <label>Builty Number</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 
 function saveRecord(){ alert("It's Working") }
 <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>Field 1</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <input type="hidden" id="hdndcId" /> <label>Field 2</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

solution5
 -1  2021-10-29 05:52:06

We'll be going over queries that are used in the day-to-day situations of a database administrator. Commands by themselves will not really do anything unless they're formed into a query. Let's get right into this.

暂无
暂无

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.

Related Question How to fix modal popup that close immediately after click button to open How to open modal popup without button click in .net core MVC How to close popup modal after button click Testcafe, how to click a button on a modal popup? how to open an aspx page as popup on button click How to open bootstrap modal using a button click How to open modal view on button click? How to open a modal on button click in ExtJS How to open the modal popup using a link, instead of button how to popup a modal from bootstrap in php on button click
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM