在标签html中使用jquery关闭模态

时间:2017-07-19 04:01:45

标签: jquery html button modal-dialog bootstrap-modal

我可以在标签html中使用jquery关闭模态吗?我正在使用如下代码,但它不起作用

<button class="circle btn btn-danger pull-right" onclick="$(this).dialog('close')">X</button>

更多我的代码:

<div class="modal fade" id="myModal7" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <button class="circle btn btn-danger pull-right" onclick="$('#myModal7').dialog('close'); ">X</button>
    <br>
        <form action="<?php echo site_url(); ?>/account_c/uploadPDF" method="post" enctype="multipart/form-data">
            <p style="padding-left: 30px; padding-right: 30px; padding-top: 30px;"><span>Certificate Name</span>                
            <input type="text" name="certificateName" class="form-control" placeholder="Certificate Name" required></p>
            <p style="padding-left: 30px; padding-right: 30px; padding-top: 30px;"><span>Upload File</span>
            <input type="file" name="pdffile" id="fileUpload" class="form-control" placeholder="Browse" required></p>
            <img src=# id="view" alt="your image" style="display:none; width:88px; height:88px; padding-left: 30px;">
            <p style="padding-left: 30px; padding-right: 30px; padding-top: 30px;"><input type="submit" name="upload" id="upload2" class="btn btn-info" style=" color:white; " value="Upload"></p>
        </form>
  </div>

</div>
</div>

提前致谢

1 个答案:

答案 0 :(得分:0)

您可以通过这种方式关闭对话框。使用对话框的ID更改class AppMain extends Component { constructor(props) { super(props); this.state = { value: 'Ha Noi', city:'', status:'', statusimg:'', temp:'', wind:'', humidity:'', time:'' }; this.handleChange = this.handleChange.bind(this); this.getjson = this.getjson.bind(this); } handleChange(event) { this.setState({ value: event.target.value }); } getjson() { $.ajax({ url: 'http://api.apixu.com/v1/current.json?key=8f226d9ba4bb4bb58ef85947171107&q=' + this.state.value, dataType: 'json', cache: false, success: function (data) { this.setState({ city: data.location.name }); this.setState({ status: data.current.condition.text }); this.setState({ temp: data.current.temp_c }); this.setState({ time: data.current.last_updated }); this.setState({ statusimg: data.current.condition.icon }); this.setState({ humidity: data.current.humidity }); this.setState({ wind: data.current.wind_kph }); }.bind(this), error: function (xhr, status, err) { console.log(err); } }); } componentWillMount() { this.getjson(); } render() { return ( <div className="main"> <div className="choose-title"> <p>Choose City</p> <select value={this.state.value} onChange={this.handleChange}> <option value="Ha Noi">Hà Nội</option> <option value="Ho Chi Minh">Hồ Chí Minh</option> <option value="Da Nang">Đà Nẵng</option> </select> </div> <div className="display"> <table className="table"> <tbody> <tr> <td>Name city:</td> <td id="namecity">{this.state.city}</td> </tr> <tr> <td>Update: {this.state.time}</td> </tr> <tr> <td id="status">{this.state.status}</td> <td id="status-img"><img src={this.state.statusimg} alt=""/></td> </tr> <tr> <td>Temp:</td> <td id="temp">{this.state.temp}°C</td> </tr> <tr> <td>Wind:</td> <td id="wind">{this.state.wind} Km/h</td> </tr> <tr> <td>Humidity:</td> <td id="">{this.state.humidity}%</td> </tr> </tbody> </table> </div> </div> ); } }

dialogID